@charset "UTF-8";
/* CSS Document */

:root{
    font-size:62.5%;
}
html {
    font-size:62.5%;
}
body{
	font-size:27px;
	color:#595857;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-style: normal;
	margin:0;
	position: relative;
    background: #f5f3f2;
}
h1,h2,h3,h4,h5,h6,p,li,th,td,dt,dd,a,span,div{  
    line-height:1.5;
    font-weight: 500;
}
a{
	color:595857;
	text-decoration:none;
    transition: 0.3s;
}
a:hover{
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
}
img {
	border: none;
	vertical-align: bottom;
    max-width: 100%;
	height: auto;
}
a img { 
	border: none;
}
a.nolink{
    pointer-events: none;
}
ul {
	list-style-type: none;
}
table{
	border-collapse: collapse;
}
.clearfix:after {
	content: "";
	display: block;
	overflow: hidden;
	clear: both;
}
.flexBox{
    display: flex;
}
.sp{
	display:none !important;
}
.spacer{
    width:100%;
}
.center{
    text-align: center;
}
.contentWidth{
    width:92%;
	max-width: 960px;
	margin: auto auto auto auto;
}

h3.style001{
    width:100%;
    height:64px;
    background: #d6808c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:40px;
    font-weight: bold;
    letter-spacing: 15px;
    color:#FFFFFF;
    padding-left: 15px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    body{
        font-size:14px;
    }
    .pc{
        display:none !important;
    }
    .sp{
        display:block !important;
    }
    .contentWidth{
        width:calc(100% - 40px);
    }
    h3.style001{
        height:40px;
        font-size:20px;
        letter-spacing: 5px;
        padding-left: 5px;
    }
}

/*--------------------------------------
    visualArea
--------------------------------------*/

.visualArea{
    width:100%;
    margin: 0 auto;
    aspect-ratio:1965 / 922;
    position: relative;
}
.visualArea h2{
    position: absolute;
    top:30px;
    left:calc(50% - 470px);
    z-index: 20;
}
.visualArea .visual{
    width:100%;
    height:100%;
}
.visualArea .visual img{
    width:100%;
    height:100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .visualArea h2{
        width:200px;
        top:10px;
        left:10px;
    }
}

/*--------------------------------------
    introArea
--------------------------------------*/

.introArea{
    text-align: center;
    margin: 100px auto 80px auto;
}
.introArea .image{
    margin-bottom: 60px;
}
@media (max-width: 768px) {
    .introArea{
        margin: 50px auto 50px auto;
    }
    .introArea .image{
        margin-bottom: 30px;
    }
    .introArea .desc{
        width:80%;
        margin:0 auto 30px auto;
    }
}

/*--------------------------------------
    thoughtArea
--------------------------------------*/

.thoughtArea{
    margin: 0px auto 90px auto;
    position: relative;
    padding-bottom: 120px;
}
.thoughtArea::after{
    content: "";
    width:77%;
    aspect-ratio:1483 / 515;
    background: url("../img/bg_thought.png") no-repeat center center / contain;
    position: absolute;
    bottom:0;
    right:0;
}
.thoughtArea .text{
    width:840px;
    line-height: 2;
    margin: 70px auto 0 auto;
    position: relative;
    z-index: 40;
}
@media (max-width: 768px) {
    .thoughtArea{
        margin: 0px auto 50px auto;
        padding-bottom: 0px;
    }
    .thoughtArea::after{
        margin-left: auto;
    }
    .thoughtArea .text{
        width:calc(100% - 40px);
        margin: 30px auto 0 auto;
    }
}

/*--------------------------------------
    pointArea
--------------------------------------*/

.pointArea{
    margin: 0 auto 170px auto;
}
.pointArea .pointBox{
    width:900px;
    display: grid;
    gap:170px;
    margin: 100px auto 170px auto;
}
.pointArea .pointBox .box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap:30px;
    position: relative;
}
.pointArea .pointBox .box:nth-child(1){
    padding-left: 210px;
}
.pointArea .pointBox .box:nth-child(1):before{
    content: "";
    background: url("../img/bg_point_001.png") no-repeat center center / contain;
    width:448px;
    height:433px;
    position: absolute;
    top:50%;
    left:210px;
    transform: translate(-50%,-50%);
}
.pointArea .pointBox .box:nth-child(2){
    padding-left: 50px;
}
.pointArea .pointBox .box:nth-child(2):before{
    content: "";
    background: url("../img/bg_point_002.png") no-repeat center center / contain;
    width:466px;
    height:465px;
    position: absolute;
    top:50%;
    left:680px;
    transform: translate(-50%,-50%);
}
.pointArea .pointBox .box:nth-child(3){
    padding-left: 260px;
}
.pointArea .pointBox .box:nth-child(3):before{
    content: "";
    background: url("../img/bg_point_003.png") no-repeat center center / contain;
    width:471px;
    height:453px;
    position: absolute;
    top:50%;
    left:260px;
    transform: translate(-50%,-50%);
}
.pointArea .pointBox .box h4{
    font-weight: bold;
    font-size:30px;
    position: relative;
    z-index: 40;
}
.pointArea .pointBox .box .text{
    line-height: 2;
    position: relative;
    z-index: 40;
}
.pointArea .image{
    width:1242px;
    height:154px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:56px;
    background: url("../img/bg_point_004.png") no-repeat center center / contain;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .pointArea{
        margin: 0 auto 50px auto;
    }
    .pointArea .pointBox{
        width:calc(100% - 40px);
        gap:40px;
        margin: 40px auto 40px auto;
    }
    .pointArea .pointBox .box{
        gap:20px;
    }
    .pointArea .pointBox .box:nth-child(1){
        padding-left: 80px;
    }
    .pointArea .pointBox .box:nth-child(1):before{
        width:160px;
        height:160px;
        left:80px;
    }
    .pointArea .pointBox .box:nth-child(2){
        padding-left: 0;
    }
    .pointArea .pointBox .box:nth-child(2):before{
        width:160px;
        height:160px;
        left:auto;
        right:0;
    }
    .pointArea .pointBox .box:nth-child(3){
        padding-left: 80px;
    }
    .pointArea .pointBox .box:nth-child(3):before{
        width:160px;
        height:160px;
        left:80px;
    }
    .pointArea .pointBox .box h4{
        font-size:18px;
    }
    .pointArea .pointBox .box .text{
        line-height: 1.8;
    }
    .pointArea .image{
        width:calc(100% - 40px);
        height:auto;
        display: flex;   
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap:20px;
        background: none;
        margin: 0 auto;
    }
    .pointArea .image li{
        width:33%;
    }
}

/*--------------------------------------
    achievementArea
--------------------------------------*/

.achievementArea{
    margin-bottom: 100px;
}
.achievementArea .achievementBox{
    width:1028px;
    margin: 50px auto 0 auto;
    display: grid;
    gap:110px;
}
.achievementArea .achievementBox .box.clearfix{
    overflow: visible;
}
.achievementArea .achievementBox .box:nth-child(2n+1){
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.achievementArea .achievementBox .box:nth-child(2n+1) h4{
    font-size: 30px;
    font-weight: bold;
    line-height: 1.8;
    color:#3e3a39;
    padding-left: 68px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}
.achievementArea .achievementBox .box:nth-child(2n+1) .image{
    width:480px;
    height:316px;
    margin:0 0 0 20px; 
}
.achievementArea .achievementBox .box:nth-child(2n+1) .text{
    width:460px;
    line-height: 2;
    color:#3e3a39;
    font-size:24px;
}
.achievementArea .achievementBox .box:nth-child(2n) h4{
    width:560px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.8;
    color:#3e3a39;
    float: right;
}
.achievementArea .achievementBox .box:nth-child(2n) .image{
    width:430px;
    float: left;
    margin: 0 auto 0 auto;
}
.achievementArea .achievementBox .box:nth-child(2n) .text{
    width:560px;
    line-height: 2;
    color:#3e3a39;
    float: right;
    font-size:24px;
}
@media (max-width: 768px) {
    .achievementArea{
        margin-bottom: 50px;
    }
    .achievementArea .achievementBox{
        width:calc(100% - 40px);
        margin: 40px auto 0 auto;
        gap:40px;
    }
    .achievementArea .achievementBox .box:nth-child(2n+1){
        display: block;
    }
    .achievementArea .achievementBox .box:nth-child(2n+1) h4{
        font-size: 18px;
        padding-left: 0;
        margin-bottom: 20px;
    }
    .achievementArea .achievementBox .box:nth-child(2n+1) .image{
        width:100%;
        height:auto;
        aspect-ratio:120 / 79;
        margin:0 0 20px 0; 
    }
    .achievementArea .achievementBox .box:nth-child(2n+1) .text{
        width:100%;
        font-size:14px;
        line-height: 1.8;
    }
    .achievementArea .achievementBox .box:nth-child(2n) h4{
        width:100%;
        font-size: 18px;
        float: none;
        margin-bottom: 20px;
    }
    .achievementArea .achievementBox .box:nth-child(2n) .image{
        width:100%;
        height:auto;
        aspect-ratio:120 / 79;
        margin:0 0 20px 0; 
        float: none;
    }
    .achievementArea .achievementBox .box:nth-child(2n) .text{
        width:100%;
        font-size:14px;
        line-height: 1.8;
        float: none;
    }
}

/*--------------------------------------
    outroArea
--------------------------------------*/

.outroArea{
    width:100%;
    height:700px;
    background: #d6808c;
    position: relative;
    padding: 70px 0 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.outroArea span{
    display: block;
    content: "";
    width:93%;
    aspect-ratio:1788 / 293;
    background: url("../img/bg_outro.png") no-repeat center center / contain;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    margin: auto 0 auto auto;
}
.outroArea h3{
    font-size:43px;
    font-weight: bold;
    color:#FFFFFF;
    letter-spacing: 15px;
    position: relative;
    z-index: 40;
}
.outroArea p{
    font-size:36px;
    color:#FFFFFF;
    z-index: 40;
    line-height: 1.3;
}
@media (max-width: 768px) {
    .outroArea{
        height:auto;
        padding: 50px 20px 50px 20px;
        box-sizing: border-box;
        display: block;
    }
    .outroArea span{
        width:93%;
        position: static;
        margin: 20px 0 20px auto;
    }
    .outroArea h3{
        font-size:24px;
        letter-spacing: 0px;
    }
    .outroArea p{
        font-size:18px;
    }
}

/*--------------------------------------
    contactArea
--------------------------------------*/

.contactArea{
    width:100%;
    height:514px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contactArea .text{
    font-size:36px;
    color:#3e3a39;
    margin-bottom: 30px;
    font-weight: bold;
}
.contactArea .btn{
    width:650px;
    height:116px;
    margin: 0 auto 50px auto;
}
.contactArea .btn a{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:44px;
    font-weight: bold;
    color:#FFFFFF;
    background: #9fb13e;
    border-radius: 9px;
}
@media (max-width: 768px) {
    .contactArea{
        height:auto;
        display: block;
        padding: 50px 0 20px 0;
    }
    .contactArea .text{
        font-size:20px;
        text-align: center;
        padding: 0 20px;
    }
    .contactArea .btn{
        width:calc(100% - 40px);
        height:50px;
        margin: 0 auto 30px auto;
    }
    .contactArea .btn a{
        font-size:16px;
    }
    .contactArea .logo{
        width:80%;
        margin: 0 auto;
    }
}