@charset "UTF-8";

/* about
----------------------------------------------- */

.second-text {width:100vw;max-width:100vw;}

.top-about { padding-bottom: 12vw; background: var(--green01);margin-bottom: 12vw;}
.top-about-image { width: 100%; margin-bottom: 15vw; position: relative; }
.top-about-image .image01 { width: 100%; }
.top-about-image .image02 { width: 36vw; position: absolute; right: 4vw; bottom: -26vw; }
.top-about-text { width: 90vw; margin: auto; z-index: 1; position: relative; }
.top-about-deco { margin-bottom: 4vw; color: #c6b77b; font-size: 3.16vw; font-family: "Lato"; font-weight: 400; line-height: 1.4; letter-spacing: 1.5vw; }
.top-about-title { margin-bottom: 6vw; }
.top-about-title .en { margin-bottom: 3.5vw; color: var(--green02); font-size: 11.84vw; font-family: "Lato"; font-weight: 400; letter-spacing: 0.4vw; display: block; }
.top-about-title .jp { font-size: 3.95vw; font-weight: bold; display: block; }
.top-about-subtitle { margin-bottom: 4vw; }
.top-about-subtitle .title { margin-bottom: 2.5vw; color: var(--green02); font-size: 6.84vw; font-weight: bold; line-height: 1.4; display: block; }
.top-about-subtitle .copy { padding: 1.5vw 2vw; color: #fff; font-size: 3.68vw; font-weight: bold; background: var(--green02); display: table; }
.top-about-comment { margin-bottom: 6vw; }
.top-about-comment p { font-size: 3.68vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }

.midashi05 {position:relative;margin:0 auto 6%;text-align: center;border: 3px solid #f3f5f8;padding:7% 5%;line-height:1.8;}
.midashi05 div:before{content: "";width: 40px;height: 40px;border: solid var(--green02);border-width: 0 2px 2px 0;box-sizing: border-box;position: absolute;right: -2px;bottom: -2px;}
.midashi05 div:after{content: "";width: 40px;height: 40px;border: solid var(--green02);border-width: 2px 0 0 2px;box-sizing: border-box;position: absolute;left: -2px;top: -2px;}
.midashi05 .sub {display: block;margin-bottom: 2%;color:var(--green02);font-size: 3.8vw;line-height: 1.4;}
.midashi05 .lead {font-size: 5.8vw;line-height: 1.3;letter-spacing: .05em;background: #fff;}

.intro{margin-bottom: 8vw;}
.read{text-align: center;}

.message-area{margin-bottom: 14%;}
.message{margin-bottom: 8vw;}
.message-area:last-of-type{margin-bottom: 0;}
.message img {width:100%; margin: 0 auto 4%;}
.message .text {width: 100%;text-align:justify;text-justify:auto;}
.message .text .lead {color:var(--green02);line-height: 1.5;font-weight: bold;margin-bottom: 10px;font-size: 4.8vw;}
.message .text span {font-weight: bold;}

.message .text dl{margin-bottom: 5vw}
.message .text dl:last-of-type{margin-bottom: 0;}
.message .text dt{margin-bottom: 3vw;border-bottom: 1px dashed #ccc;font-weight: 600;position: relative;padding: 0 0 3vw 5vw;}
.message .text dt::before{content: "";width: 3vw;height: 3vw;background: #ffeba6;position: absolute;z-index: -1; left: 0;top: 0;}
.message .text dd{line-height: 1.6;}

.inner{width:90%;margin: 0 auto;}






/* =============================================
pc-size 
================================================*/
@media screen and (min-width: 736px) {
	
.top-about { padding: 100px 0 50px; background: url(../images/top-about-bg.png) no-repeat top left calc(50% - 690px); background-size: 568px;margin-bottom:60px;}
.top-about-content {width: 96%;max-width: 1200px;margin: auto;z-index: 1;position: relative;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.top-about-content:after { content: ''; width: 850px; height: 560px; background: var(--green01); z-index: -1; position: absolute; top: 0; right: 35px; }
.top-about-image {width: 74%;margin: -100px -200px 0 0;order: 1;}
.top-about-image .image02 {width: 330px;margin: 45px auto 0 -100px;position: relative;right: auto;bottom: auto;}
.top-about-text { width: 480px; margin: 0; order: 0; }
.top-about-deco { margin-bottom: 10px; font-size: 12px; letter-spacing: 6px; }
.top-about-title { margin-bottom: 40px; }
.top-about-title .en { margin-bottom: 15px; font-size: 62px; letter-spacing: 2px; }
.top-about-title .jp { font-size: 15px; }
.top-about-subtitle { margin-bottom: 20px; }
.top-about-subtitle .title { margin-bottom: 30px; font-size: 30px; }
.top-about-subtitle .copy { padding: 8px 12px 7px; font-size: 15px; }
.top-about-comment { margin-bottom: 40px; }
.top-about-comment p { font-size: 15px; }
	
.midashi05 {margin-bottom:30px;padding: 50px;line-height:1.8;}
.midashi05 div:before{width: 80px;height: 80px;}
.midashi05 div:after{width: 80px;height: 80px;}
.midashi05 .sub {margin-bottom: 8px;font-size: 20px;line-height: 1.4;}
.midashi05 .lead {font-size: 36px;line-height: 1.3;}
	
.intro{margin-bottom:30px;}
	
.message-area{margin-bottom: 100px}
.message {display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:flex;flex-wrap:wrap;justify-content: space-between;margin-bottom: 60px;align-items: flex-start;}
.message img {order:2;width:30%;max-width:350px; margin: 0;}
.message .text {width:67%;}
.message .text .lead { margin-bottom: 20px; font-size:20px;}
.message .text p:last-child{margin-bottom: 0;}
.message .text dl{margin-bottom:30px;}
.message .text dt{margin-bottom: 10px;padding: 0 0 10px 20px}
.message .text dt::before{width: 13px;height: 13px;}
	
	
.inner{max-width:1200px;}
	
	
}

/* =============================================
tablet-size
================================================*/
@media screen and (min-width: 736px) and ( max-width:1024px) {

	
	
	
}