@charset "utf-8";

/*============================================*/
/* 基本設定 */
/*============================================*/
body * {box-sizing : border-box;}
p {font-size: 16px; line-height: 1.9em;letter-spacing: 0.8px;}
@media screen and (max-width: 640px) {
p{font-size: 13px;line-height: 1.7em;left: 0.5px;margin:2 auto;}
}

.bold{font-weight: bold;}

/*============================================*/
/* 背景色 */
/*============================================*/

.lead-bg01{background-color: #ededed; padding:50px 0;}
/*.lead-bg01 { background-color: #f3f3f3; padding: 30px 0px;}*/
.lead-bg02 { background-color: #e0ece5;padding: 30px 0px;}
.lead-bg03 { background-color: #ece8e0;padding: 30px 0px;}

@media screen and (max-width: 640px) {
.lead-bg06 {padding: 10px;}
.lead-bg07 {padding: 10px;}
.lead-bg08 {padding: 1px 10px;}
}


/*============================================*/
/* 背景画像入り */
/*============================================*/
.block_ttl_01 {
  width: 100%; height: 250px;
  display: flex;justify-content: center;align-items: center;
  position: relative;background: url('img/bgi_01.jpg') no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
.block_ttl_02 {
  width: 100%; height: 250px;
  display: flex;justify-content: center;align-items: center;
  position: relative;background: url('img/bgi_02.jpg') no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
.block_ttl_03 {
  width: 100%; height: 250px;
  display: flex;justify-content: center;align-items: center;
  position: relative;background: url('img/bgi_03.jpg') no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
.block_ttl_04 {
  width: 100%; height: 250px;
  display: flex;justify-content: center;align-items: center;
  position: relative;background: url('img/bgi_04.jpg') no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
.block_ttl_05 {
  width: 100%; height: 250px;
  display: flex;justify-content: center;align-items: center;
  position: relative;background: url('img/bgi_05.jpg') no-repeat;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
@media (max-width: 767px){
.block_ttl_01 {height: 220px;}
.block_ttl_02 {height: 220px;}
.block_ttl_03 {height: 220px;}
.block_ttl_04 {height: 220px;}
.block_ttl_05 {height: 220px;}  
  }

/*============================================*/
/* リード部分 */
/*============================================*/
.starter-template {
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding:25px;
    margin: 0 auto;
    color: #333;
    font-family: "Zen Kaku Gothic New", sans-serif;
}
.starter-template h1{
    display: inline-block;
    text-align:center;
    font-size:25px;
    font-weight: bold;
    line-height:34px;
    margin-bottom: 15px;
    padding: 0 20px;
    color: #333;
}
.starter-template p{font-size:1.3rem;font-weight: bold; text-align:center;}
@media screen and (max-width: 640px) {
.starter-template h1{
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 5px;
}
.starter-template p{font-size: 15px; text-align:left ;}
}


/*============================================*/
/* 文字関連 */
/*============================================*/
.philosphy{font-family: "Zen Kaku Gothic New", sans-serif;text-align:center;}
.philosphy h1{ font-size:45px; margin:2% 0 5% 0;}
.philosphy h2{ font-size:35px; margin:5% 0 0 0;}
.philosphy h3{ font-size:60px; line-height:64px; margin:2% 0 5% 0;}
.philosphy h3 span{ font-size:24px;}

.subtitle_eng{ font-size:20px; margin:6% 0 0 0; color:#1d7844;}

.title_txt{font-family: "Zen Kaku Gothic New", sans-serif;text-align:center;}
.title_txt p{font-size:40px; margin:4% 0 1% 0; color:#9ec3ad;}
.title_txt h2{font-size:24px;margin:0 0 5% 0;}


.group_title{ font-size:1.8em; font-family:"Zen Kaku Gothic New", sans-serif;text-align:center;margin:0 0 4% 0;}
.group_p{ font-family: "Noto Sans JP", sans-serif; font-size:11px; margin:2% 0; line-height:1.2em;}



.report_txt{font-family: "Zen Kaku Gothic New", sans-serif;text-align:center;}
.report_txt p{font-size:16px; margin:2% 0 1% 0; line-height:1.4em;}

.txt{font-family:  font-family: "Noto Sans JP", sans-serif;  font-feature-settings: "pkna";}
.txt p{ font-size:18px; font-weight:300; margin:0 0 5% 0; letter-spacing:1px;}

.item{font-family: "Zen Kaku Gothic New", sans-serif;text-align:center;}
.item h1{ font-size:28px;font-weight:bold;margin:2% 0 2% 0;}
.item h2{ font-size:20px;font-weight:bold;margin:4% 0 2% 0; line-height:1.3em;}
.item h3{ font-size:14px;margin:4% 0 0 0;border: solid 2px #fff; padding:3%; background-color:#cdb287; color:#FFF;}



.lineup_txt{position: relative; font-family: "Noto Sans JP", sans-serif;}
.lineup_txt h2{color:#443c39;font-weight:bold;margin-bottom:3%;margin-top:2%;font-size:1.3rem; text-align:center;}
/*.lineup_txt h2::before{content: url(img/linrup_icon.svg);transform: scale(0.7) ; position: absolute;top:-66px; margin: 50px auto 0px;}*/
.lineup_txt p{ font-size:16px;text-align:center; margin:0 0 6% 0;}


.item_p{ font-size:19px;}
.btn_txt{ padding:1% 5% 5% 5%;}

@media screen and (max-width: 640px) {
.philosphy h1{ font-size:33px; margin:1% 2% 5% 2%;}
.philosphy h2{ font-size:20px; margin:5% 0 2% 0;}
.philosphy h3{ font-size:42px; line-height:48px; margin:2% 0 10% 0;}
.philosphy h3 span{ font-size:18px; top:-5%;}

.subtitle_eng{ font-size:18px; margin:6% 0 0 0;}


.title_txt h2{font-size:24px;margin:4% 0 8% 0; line-height:32px;}
.title_txt p{font-size:26px; margin:2% 0 1% 0;}

.txt p{ font-size:16px; margin:0 2% 8% 2%; letter-spacing:0.5px; line-height:32px; text-align:justify;}

.group_title{ font-size:1.8em; margin:0 0 6% 0;}


.item h1{ font-size:26px;font-weight:bold;margin:5% 0 5% 0; text-align:center; line-height:36px;}
.item h2{ font-size:16px;font-weight:bold;margin:4% 0 2% 0; line-height:1.3em;}
.item h3{ font-size:13px;margin:4% 0 1% 0;border: solid 2px #fff; padding:4%; background-color:#cdb287; color:#FFF;}

.report_txt p{font-size:16px; margin:2% 0 4% 0; line-height:1.4em;}

.lineup_txt h2{color:#443c39;font-weight:bold;margin-bottom:5%;margin-left:60px;margin-top:8%;font-size:20px; text-align:left;}
.lineup_txt h2::before{content: url(img/linrup_icon.svg);transform: scale(0.7) ; position: absolute;top: -23px;left: -10px;z-index:-1;}
.lineup_txt p{ font-size:14px; line-height:28px; margin:0 2% 4% 2%; text-align:left;}

.item_p{ font-size:16px;}
.btn_txt{ padding:1% 10% 1% 10%;}
}

img.ttl01 {display: block;max-width: 180px;margin: 50px auto 0px;}




/*=========================
その他設定
=========================*/

/*　hr設定打消し　*/
hr{height: 0; margin: 0;padding: 0;border: 0;}


.hr_simple {border-top: 2px solid #aaa; margin:4% 0 2% 0;}
.hr_dot {border-top: 2px dotted #aaa;}
.hr_double {border-top: 3px double #aaa;}

@media screen and (max-width: 640px) {
.hr_simple {border-top: 2px solid #aaa; margin:4% 0 1% 0;}
}


.ul{background:linear-gradient(transparent 50%,  #c8e6d8 60%);}
.wakusen{ border:1px solid #d3d3d3; border-radius:5px; }


/*=========================
追加バナーのホバー設定
=========================*/
.hover-opacity {transition-property: opacity;transition-duration: 0.2s;}
.hover-opacity:hover {opacity: 0.6; }




/*=========================
ボタン
=========================*/
.btn-report a {
	text-decoration:none;
    background: #eee;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2% auto;
    max-width: 560px;
    padding: 2% 2%;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 800;
	font-size:1.0em;
	}
.btn-report a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.2s ease-in-out;
    content: "》";
    font-weight: 900;
    transform: translateY(-50%);
}
.btn-report a:hover {
    background: #1d7844;
    color: #FFF;
}



/*ショートver*/

.btn-report_sht a {
	text-decoration:none;
    background: #eee;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2% auto;
    max-width: 560px;
    padding: 3% 2%;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 800;
	font-size:1.0em;
	}
.btn-report_sht a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.2s ease-in-out;
    content: "》";
    font-weight: 900;
    transform: translateY(-50%);
}
.btn-report_sht a:hover {
    background: #1d7844;
    color: #FFF;
}


/* ======================================*/
/* 画像上の丸 */
/* ======================================*/
.on_img {
    position: relative;
    text-align: center;
}
.on_img span {
    color: #fff;
    background:#1d7844;
    width: 70px;
    height: 70px;
    position: absolute;
    top: -10%;
    left: -8%;
    z-index: 10;
    border-radius: 50%;
    padding: 20px 0px;
    font-size: 13px;
}
@media screen and (max-width: 640px) {
.on_img span{
    /*display: none;*/
    width: 60px;
    height: 60px;
    top:  -18px;
    left: 5%;
    padding: 13px 0px;
    }
}




/*============================================*/
/* メニュー・ナビボタン */
/*============================================*/
.nav{
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 640px) {
.nav{
    display: block;
    text-align: center;
}
}
.nav ul{
    display: flex;
    width: 80%;
    justify-content: space-between;
}
.nav li{
    display: flex;
    padding: 15px 40px;
    margin: 0px 3px;
    border: solid 3px #1d7844;
}
@media screen and (max-width: 640px) {
.nav li{
    display: block;
    width: 100%;
    margin: 10px 0px;
}
}
.nav li:hover{
    border: solid 3px #1d7844;
    box-shadow: 2px 2px 0.5px #1d7844;
    color: #000;
}
.nav a{
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
	font-weight:bold;
    text-decoration: none;
    color: #1d7844;
}
.nav a:hover{color: #000;}
@media screen and (max-width: 640px) {
.nav a{
    font-size: 13px;
    letter-spacing: 0.5px;
}
}


/*======================================
---------------レイアウト---------------
======================================*/

/*10pxアキのグリッドレイアウトにする*/
.grd_gp10 {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
/*20pxアキのグリッドレイアウトにする*/
.grd_gp20 {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
/*25pxアキのグリッドレイアウトにする*/
.grd_gp25 {
    display: grid;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
}

/*50pxアキのグリッドレイアウトにする*/
.grd_gp50 {
    display: grid;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}

/*80pxアキのグリッドレイアウトにする*/
.grd_gp80 {
    display: grid;
    grid-column-gap: 80px;
    grid-row-gap: 80px;
}


/*均等2分割*/
.grd_col_2fr{
    grid-template-columns: 1fr 1fr;  
}
.grd_col_2fr_r{
    grid-template-columns: 1fr 1fr; 
    grid-template-areas:
    "areaA areaB";
}
/*均等3分割*/
.grd_col_3fr{
    grid-template-columns: 1fr 1fr 1fr;
}
/*均等4分割*/
.grd_col_4fr{
    grid-template-columns: 1fr 1fr 1fr 1fr; 
}
/*均等5分割*/
.grd_col_5fr{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
}

/*3:2の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_3_2_l {
    grid-template-columns: 3fr 2fr;
}
/*2:3の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_2_3_l {
    grid-template-columns: 2fr 3fr;
}
/*3:2の2分割レイアウト（スマホ表示にしたとき、右の要素を上に表示）※直下のdivにgrd_itm1,grd_itm2などでエリア指定を行う*/
.grd_col_3_2_r {
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
    "areaA areaB";
}
/*2:3の2分割レイアウト（スマホ表示にしたとき、右の要素を上に表示）※直下のdivにgrd_itm1,grd_itm2などでエリア指定を行う*/
.grd_col_2_3_r {
    grid-template-columns: 2fr 3fr;
    grid-template-areas:
    "areaA areaB";
}
/*1:4の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_1_4_l {
    grid-template-columns: 1fr 4fr;
}
/*4:1の2分割レイアウト（スマホ表示にしたとき、左の要素を上に表示）※直下のdivは何も指定しなくてよい*/
.grd_col_4_1_l {
    grid-template-columns: 4fr 1fr;
}
.grd_itm1{
    grid-area:areaA;
}
.grd_itm2{
    grid-area:areaB;
}
/*均等3分割SNS用*/
.grd_sns{
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
/*sns内の画像サイズを40%に*/
.grd_sns img{
    width:40%;
}

@media (max-width: 767px){
/*スマホ表示の際、分割せず縦並び*/
    .grd_sp1fr{
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

/*スマホ表示の際、分割せず縦並び*/
    .grd_sp1fr_r{
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-areas:
        "areaB"
        "areaA";
    }


/*スマホ表示の際、均等2分割横並び*/
    .grd_sp2fr{
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }
/*スマホ表示の際、右の要素を上に表示*/
    .grd_col_3_2_r, .grd_col_2_3_r, .grd_col_2fr_r {
        grid-template-areas:
        "areaB"
        "areaA";
    }
  .grd_sns{
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    }
    .grd_sns img{
        width:60%;
    }
}


/*============================================*/
/*SNS*/
/*============================================*/


.sns{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.sns-box00{
  display: block;
  width: 20%;
  text-align: left;
  border-right: solid 1px #333;
}

.sns-box01{
  display: inline-block;
  width: 15%;
  padding: 10px;
  text-align: center;
}

.sns img{width: 40%;}

.sns h2{
  font-family: sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin: 20px 0px;
  text-align: center;
}

.sns h2::before{content: none;}

.sns h4{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0px;
  text-shadow: none;
  margin-bottom: 20px;
}

@media only screen and (max-width : 767px) {
/* @media (max-width: 767px){ */
  .sns img{width: 80%;}
  .sns h2{font-size: 20px;margin: 10px 0px;}
  .sns-box00{width: 25%;}
  .sns-box01{width: 18%;}
  .sns h4{font-size: 11px;}
}
/*============================================*/
/*下に空白 */
/*============================================*/
/* 100px */
.bottom_blank100 {margin-bottom: 150px;}
/* 80px */
.bottom_blank80 {margin-bottom: 80px;}
/* 50px */
.bottom_blank {margin-bottom: 50px;}
/* 30px */
.row_bottom{margin-bottom:30px;}
/* 20px */
.bottom_blank20{margin-bottom: 20px;}
/* 10px */
.bottom_blank10{margin-bottom: 10px;}
/* PC80px、スマホ30px */
.row_bottom80{margin-bottom:80px;}
@media screen and (max-width: 475px) {
/* スマホだけ30px */
.row_bottom30{margin-bottom:30px;}
/* PC80px、スマホ30px */
.row_bottom80{margin-bottom:30px;}
}
/*下部の余白マージン（PCは広く、smpでは狭く）*/
.margin_blank_responsiv {margin-bottom:100px;}
@media (max-width: 767px){
.margin_blank_responsiv {margin-bottom:50px;}
}
/*============================================*/
/*上に空白 */
/*============================================*/
/* 10px */
.top_blank10{margin-top: 10px;}
/* 30px */
.top_blank30{margin-top: 30px;}
/* 50px */
.top_blank50{margin-top: 50px;}
/* 80px */
.top_blank80{margin-top: 80px;}



/*============================================*/
/* PCスマホ表示 */
/*============================================*/
@media only screen and (max-width : 320px) {
.pc_h{display:none;}
.smp_h{display:inline;}
}
@media only screen and (min-width : 320px) {
.pc_h{display:none;}
.smp_h{display:inline;}
}
@media only screen and (min-width : 992px) {
.pc_h{display:inline;}
.smp_h{display:none;}
}
@media only screen and (min-width : 1200px) {
.pc_h{display:inline;}
.smp_h{display:none;}
}