html { scroll-behavior: smooth;}
/*ヘッダーまわり*/
.wrap{}

.yoyakuhead{max-width: 1200px; min-width: 360px; width: 100%; margin: 0 auto; padding: 0;}
.headwrap{
	display: block; position: relative; width: 100%; 
	margin-top: 0px; margin-bottom: 40px; background:#fff;}

.headwrap1 {
	display: block; position: absolute; z-index: 10; width: 100%;    
	background: #000;	height: 100px; 	top:0px;	}

.head5g{ display: block; position: absolute; z-index: 300; max-width:800px; width: 80%;
	height: 117px; background: #fff; left: 0; right: 0; top:30px; margin: auto;}

.logo5g{ position: absolute; left: 50px; top:0px; width: 246px;}

.to5glabimg{ position: absolute; width: 430px; 
	top:0; bottom: 0; margin-top: auto; margin-bottom: auto;
	right: 20px; border: solid 1px #000;  }

.headwrap2 {display: block; position: absolute; z-index: 11;
    background: #251515;	width: 100%;	top:100px;	height: 300px; 	}

.topimg { display: block; position: absolute; z-index: 300; max-width:800px; 
	width: 90%; height: 300px; background: #fff; 
	left: 0; right: 0; top:160px; margin: auto;	}

.topimg img{position: absolute; left: 0; right: 0; margin: auto; }

.toptxt{display: block; position: relative; width: 100%;text-align: center;
	margin:0px auto 55px auto; padding: 1em; background:; z-index: 400; }

.toptxt h4{font-size: 2.4em; font-weight: 800!important; margin-bottom:1em;
	line-height: 2em; color: #251515;
	font-family: "corporate-logo-ver2", sans-serif;}

.toptxt h4 span{color:#f7b52c;}

a.btn_06 {
    display: block !important;
    width: 280px !important;
    /* marginは固定（hover時も絶対に変えない） */
    margin: 40px auto !important; 
    padding: 2rem 2rem !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 1.2rem !important;
    line-height: 1.6em !important;
    font-weight: bold !important;
    border-radius: 1vh !important;
    color: #fff !important;
    font-family: "corporate-logo-ver2", sans-serif !important;
    box-sizing: border-box !important;

    /* --- 立体デザイン --- */
    background: linear-gradient(to bottom, #76a879 0%, #558458 100%) !important;
    border: none !important;
    border-bottom: 7px solid #3d603f !important; 
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 8px 15px rgba(0, 0, 0, 0.1) !important;

    /* --- 位置固定のための設定 --- */
    position: relative !important;
    top: 0 !important;
    transition: transform 0.1s, border-bottom 0.1s, box-shadow 0.1s !important;
}

/* ロールオーバー時 */
a.btn_06:hover {
    /* marginは使わず、transformで自分だけを下にずらす */
    transform: translateY(4px) !important;
    
    /* 下がった分だけ厚みを減らす（これで底辺の位置が変わらない） */
    border-bottom: 3px solid #3d603f !important;
    
    /* 影を薄くして接地感を出す */
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 5px rgba(0, 0, 0, 0.2) !important;
    
    color: #fff !important;
    margin-top: 40px !important; /* 元のmarginと同じ値を指定して上書きを防ぐ */
}

/* クリック時 */
a.btn_06:active {
    transform: translateY(7px) !important;
    border-bottom: 0px solid #3d603f !important;
    box-shadow: none !important;
}

.dltext_s{text-align: center; margin: 0 auto; font-size: 0.8em; font-weight: 800;}

.hojyobox_igai{width:100%!; left: 0; right: 0; margin: 30px 0; padding: 2em 0em 1em 0em;
    background-color:#FFECC3;}

#mvSect{
	background-image: url('./img/26/webtop_back.png?20260406');
	background-position: center; 
	background-repeat: repeat;
    background-color: #f6f1d6;
	z-index: -2;
	position: relative;
}
.mvMain{
    text-align: center;
	height: 616px;
	position: relative;
	margin-bottom: 0px;
}
.mvMain img{
    max-height: 460px;
	left: 50%;
top:40px;
    transform: translateX(-50%);
	position: absolute ;
		z-index: 3;
}
/*END ヘッダーまわり*/

.midashi{
font-size:1.5em!important; 
font-family: "corporate-logo-ver2", sans-serif;
font-weight: 800;
font-style: normal;
display: block;
height: 3em;
line-height: 3em;
border-radius: 10px;
	padding: 0;
background-color: #251515;
color: #f6f1d6;
width: 660px;
	left: 50%;
    transform: translateX(-50%);
	position: absolute ;
position:relative;padding-bottom:23px; margin-bottom:36px!important; top:0px;text-align:center;
}
	
.toptxtbox{display: block; width:360px; margin: 0 auto;}


#ouboyoukou_wrap{width: 100%; margin: 50px 0; padding: 1em;
	background-image: url('./img/26/aihojyo_ob.png?20260406');
	background-repeat: repeat-x;
    background-color: #f6f1d6;
}


#ouboyoukou_wrap h2{}

.hojyobox{width: 100%; max-width: 800px; left: 0; right: 0; margin: 50px auto;}
.hojyobox_igai{width:100%; left: 0; right: 0; margin: 50px auto; padding: 2em 1em 1em 1em;
    background-color:#FFECC3; border-radius: 20px;}
.hojyobox_igai ol{width: 80%; text-align: left; margin-left: 6em; margin-right: 6em;}
.hojyobox_igai ul{width: 80%; text-align: center; margin-left: 4em; margin-right: 4em;}
.hojyobox_igai ul li{font-weight: 800; font-size: 1.2em; line-height: 1.8em;}
.hojyobox_igai ul li span{background:#f7b52c; padding: 4px 20px; border-radius: 8px;}
.hojyobox_form{width: 90%; max-width: 400px; left: 0; right: 0; margin: 50px auto;}
.hojyobox h2{
	font-size: 1.4em;
	margin-bottom: 0.5em;
font-family: "corporate-logo-ver2", sans-serif;
font-weight: 700;
font-style: normal;
}


.hojyo_saitaku{display: ;}
.hojyo_saitaku li{display:flex; margin-bottom: 24px;}
.hojyo_saitaku li div{display: block;}
.hojyo_saitaku li h4{font-size: 0.9em; font-weight: 800;}
.hojyo_saitaku li h4 span{font-size: 0.8em;font-weight: 300;}
.hojyo_saitaku li h5{padding:0 0 10px 20px; color: #4A4A4A; font-size: 0.8em;}
.hojyo_saitaku li p{font-size: 0.8em; line-height: 2em;padding:0 0 0 20px; }
.hojyo_saitaku img{width: 320px; height: 160px; float: left; margin: 0 10px 0px 0;}
.hojyo_saitaku a{display: ; padding:2px 6px; background: #6A6A6A; color: #fff!important; text-decoration: none; width: 4em; margin: 2px 0 0; text-align: center;  font-weight: 800; border-radius: 4px; border-bottom: solid 2px #C0C0C0;}

.hojyodlbtn {
    display: block;
    padding: 1.2em 1em; /* 少し高さを出して押しやすく */
    background: linear-gradient(to bottom, #fff 0%, #558458 100%); /* 上から下へのグラデーション */
    border-radius: 8px;
    text-align: center;
    color: #fff !important;
    width: 420px;
    margin: 0 auto;
    text-decoration: none;
    font-weight: bold;
    box-sizing: border-box;
    
    /* 立体感を作る影の設定 */
    border: none;
    border-bottom: 5px solid #000; /* ボタンの「厚み」部分 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 地面への影 */
    
    position: relative;
    transition: all 0.2s;
}

/* ホバー時（マウスを乗せた時） */
.hojyodlbtn:hover {
    background: linear-gradient(to bottom, #76b079 0%, #5a8d5d 100%); /* 少し明るく */
    transform: translateY(2px); /* 2px下に下がる */
    border-bottom: 3px solid #3d603f; /* 厚みを少し減らす */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); /* 影を薄く */
}

/* アクティブ時（クリックした瞬間） */
.hojyodlbtn:active {
    transform: translateY(5px); /* 完全に押し込んだ状態 */
    border-bottom: none; /* 厚みをゼロにする */
    box-shadow: none; /* 影を消す */
}

.hojyoqa li{margin-bottom: 1em; font-size: 1em; font-weight: 300; line-height: 2em; margin-left: 60px;}
.hojyoqa li span{ color: #251515; font-size: 1.2em; font-weight: 800;margin-left: -40px;}
.hojyodlzip{display: block; width: 400px; margin: 0 auto;}


#hojyobox_qa
{width: 100%; margin: 50px 0; padding: 1em;
	background-image: url('./img/26/aihojyo_ob.png?20260406');
	background-repeat: repeat-x;
    background-color:#f6f1d6;}

#hojyodl_wrap
{ display: block; width: 800px; margin: 50px auto; padding: 1em;
    background-color:;
	text-align:	center;
}

#hojyo_contents_wrap
{ display: block; width: 800px; margin: 20px auto 0px auto; padding: 1em;
    background-color:;
	text-align:	center;
}


#soudan_wrap
{width: 100%; margin: 0px 0 50px 0; padding: 0em;
    background-color: #fff;
	text-align:	center;
}

#soudan_wrap h4{font-size: 1.2em; font-weight: 800!important; margin-bottom:1em;
	line-height: 1.4em; color: #251515;}

#jimukyoku_wrap
{width: 100%; margin: 50px 0; padding: 1em;
	text-align:	center;
}
#jimukyoku_wrap span{
font-family: "corporate-logo-ver2", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2em;
color: #251515;
margin: 20px 0;
}
#jimukyoku_wrap a{color: #251515;}

.dltext_s{text-align: center; margin: 0 auto; font-size: 0.8em; font-weight: 800;}

.hojyobox_igai{width:100%; left: 0; right: 0; margin: 30px 0; padding: 2em 1em 4em 1em;
    background-color:#FFECC3;}
.kaiketsu li{margin-bottom: 2em;}

.kaiketsu h3{font-size: 1.2em; font-weight: 800!important; margin-bottom:1em;
	line-height: 1.2em; color: #251515;
	font-family: "corporate-logo-ver2", sans-serif;}

/*フローのコンテナ*/

/* フロー図全体のコンテナ */
.flow-container {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 各ステップのボックス */
.flow-item {
    width: 280px;
    min-height: 80px; /* 内容に応じて調整 */
    background-color: #ffffff;
    border: 4px solid #000000;
    padding: 20px;
    margin-bottom: 50px; /* 矢印を表示するための余白 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
}

/* 最後の要素だけは矢印（margin）を不要にする */
.flow-item:last-child {
    margin-bottom: 0;
}

/* 下矢印の作成 */
.flow-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -45px; /* ボックスの下に配置 */
    left: 50%;
    transform: translateX(-50%);
    
    /* 矢印の「棒」部分 */
    width: 4px;
    height: 40px;
    background-color: #000000;
}

/* 矢印の「先端」部分 */
.flow-item:not(:last-child)::before {
    content: "";
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    
    /* 三角形の先端 */
    width: 15px;
    height: 15px;
    border-right: 4px solid #000000;
    border-bottom: 4px solid #000000;
    transform: translateX(-50%) rotate(45deg);
}


.flow-number {
  /* 円のサイズ指定 */
  width: 38px!important;
  height: 38px!important;
  /* もしくは width だけ指定して aspect-ratio: 1 / 1; でもOK */

  /* 背景色と文字色 */
  background-color: #f7b52c;
  color: #fff;

  /* 正円にする設定 */
  border-radius: 50%;

  /* 数字を上下左右中央に配置 */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* フォント調整 */
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1; /* 余計な上下余白を消す */
	margin-right: 1em;
}

.flow_container-text{
	width: 200px;}
/*フローのコンテナ　END*/




/* 1. 動き（回転）のルールを作る */
@keyframes spin {
  from {
    transform: rotate(0deg);    /* 0度から開始 */
  }
  to {
    transform: rotate(360deg);  /* 360度まで回転 */
  }
}



/* --- 2. 土台の設定（はみ出し防止） --- */
.bg-container {
  position: absolute; /* absoluteのままでOK */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;       /* 最初の画面分だけ表示。ページ全体なら「100%」 */
  overflow: hidden;   
  z-index: -1;
  pointer-events: none;
}

/* --- 3. 左右にずらす個別設定 --- */
.bg-svg {
  /* position: fixed; から変更 */
  position: absolute; 
  
  width: 500px;
  height: 500px;
  opacity: 0.3;
  z-index: -1;
  
  animation: spin 30s linear infinite;
  pointer-events: none;
}

/* 左上に配置（スクロールで上に消える） */
.left-top {
  top: -100px;
  left: -100px;
}

/* 右下に配置（スクロールで上に消える） */
.right-bottom {
  /* absoluteの場合、bottomではなくtopで位置を決めたほうが制御しやすいです */
  top: 500px; /* 例えば上から500pxの位置に配置 */
  right: -150px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


@keyframes spin {
  to { transform: rotate(360deg); }
}


/*////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 460px) {
.hojyo_saitaku img{width:100%;float: left; margin: 0 0px 4px 0;}
.hojyo_saitaku li{display:block; margin-bottom: 24px;}
.hojyo_saitaku li h4{font-size: 1em; font-weight: 800;}
}

.toptxtbox{display: block; width: 80%; margin: 0 auto;}

h2{
display: block;
text-align: left;
font: normal normal bold 16px/30px Meiryo; font-weight: 800!important;
letter-spacing: 0px;
color: #251515;
opacity: 1;
padding-top:1.5em!important;
}

.youkou01{color: var(--unnamed-color-000000);
text-align: left;font-weight: 800;font-size: 2em;
letter-spacing: NaNpx;color: #000000;opacity: 1;}

.youkou01 span{font-size: 0.7em;}

.igai{width: 100%; background:; text-align: center;}
.igai_inbox{display: inline-block; vertical-align: top; width: 310px; height: 400px; padding: 2em; margin: 20px; background: #fff; border: solid 1px #ddd;}
.igai_inbox h3{font-size: 1.2em; font-weight: 800; text-align: center;}

.igaip{text-align: left;}
.igai hr{width:60px;height:3px;margin:1em auto; background-color:#251515;}
.igaibn_oya{position: relative;}
.igaibn {position: absolute; bottom: 0; left: 0; right: 0;  margin: 0 auto 20px auto;}
table{ border-collapse:  collapse;     /* セルの線を重ねる */}
th{background:#01ADED0A; font-weight: normal;color: #251515;}
tr, td ,th {border: solid 1px #251515; padding: 0.5em; font-size: 1em;}
.table01{width: 240px;}


.sankaku::before{
    width: 18px;
    height: 18px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #251515;
}
.sankaku::after{
    left: 6px!important;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    border: 6px solid transparent;
    border-left: 8px solid #fff;
}

.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 24px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.sch_sp{display: none;}


@media (max-width: 460px) {
   /* 横幅が460px以下の場合に適用するスタイル */
	
.bg-container{display: none;}
.headwrap{
	display: block; position: relative; width: 100%; height: 300px;
	margin-top: 0px; margin-bottom: 40px; background:#fff;}

.topimg { display: block; position: absolute; z-index: 300; max-width:800px; 
	width: 90%; height: 100px; background: #fff; 
	left: 0; right: 0; top:200px; margin: auto;	}
	
#mvSect{
	background-image: url('./img/26/webtop_back.png?20260406');
	background-repeat: repeat;
    background-color: #f6f1d6;
	background-size:380px;
}
.mvMain{
    text-align: center;
	height: 380px;
	position: relative;
	margin-bottom: 0px;
}
.mvMain img{
	width: 90%;
	left: 50%;
    transform: translateX(-50%);
	position: absolute ;
}
	
.toptxt{display: block; position: relative; width: 90%; z-index: 400; max-width: 800px; margin:0px auto 0 auto;
	}
.toptxt h4{font-size: 2em; font-weight: 800!important; margin-bottom:2em;
	line-height: 1.2em; color: #251515;
	font-family: "corporate-logo-ver2", sans-serif;}	

.head5g{ display: block; position: absolute; z-index: 300; max-width:800px; width: 80%;
	height: 140px; background: #fff; left: 0; right: 0; top:30px; margin: auto;}	
.to5glabimg{ position: absolute; width: 240px; 
	top:60px; bottom: 0; margin :auto;
	right: 0; left: 0; border: solid 1px #000;  }

.logo5g{ position: absolute; left: 0; right: 0; top:10px; margin: auto; width: 160px;}

	
.sch_sp{display: block;}
	.sch_pc{display: none;}
	.table01{width:100px; }
	
.igai_inbox{display: inline-block; vertical-align: top; width: 90%; height: auto; padding: 2em; margin: 4px;  border: solid 1px #ddd; padding-bottom: 160px;}
.igaibn_oya{position: relative;}
.igaibn {position: absolute; bottom: 0; left: 0; right: 0;  margin: 0 auto 20px auto;}
	
	
	.hojyobox{width:100%; max-width: 800px; left: 0; right: 0; margin: 20px auto;}
.hojyobox_igai{width:100%; left: 0; right: 0; margin: 20px auto; padding: 2em 1em 1em 1em;
    background-color:#FFECC3; border-radius: 20px;}
.hojyobox_igai ol{width: 80%; text-align: left; margin-left: 4em; margin-right: 2em;}
.hojyobox_igai ul{width: 80%; text-align: center; margin-left: 3em;}
.hojyobox_igai ul li{font-weight: 800; font-size: 1.2em; line-height: 1.8em;}
.hojyobox_igai ul li span{background:#f7b52c; padding: 4px 20px;}
.hojyobox_form{width: 90%; max-width: 400px; left: 0; right: 0; margin: 50px auto;}
.hojyobox h2{
	font-size: 1.4em;
	margin-bottom: 0.5em;
font-family: "corporate-logo-ver2", sans-serif;
font-weight: 700;
font-style: normal;
}


#hojyodl_wrap
{width: 100%; margin: 50px 0; padding: 0em;
    background-color: #fff;
	text-align:	center;
}
	
#hojyo_contents_wrap
{width: 100%; margin: 20px 0; padding: 0em;
    background-color:;
	text-align:	center;
}
	
.midashi{
font-size:1.5em!important; 
font-family: "corporate-logo-ver2", sans-serif;
font-weight: 800;
font-style: normal;
	
display: block;
	height: 3em;
	line-height: 3em;
padding: 0;
background-color: #251515;
color: #f6f1d6;
width: 360px;
	left: 50%;
    transform: translateX(-50%);
	position: absolute ;
position:relative; padding-bottom:23px; margin-bottom:36px!important; top:0px; text-align:center;

}
a.btn_06 {/* スマホ用 */
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.2rem;
    width: 80%;
    margin: auto;
    padding: 1rem 1rem;
    font-weight: bold;
    border-radius: 1vh;
    border-bottom: 7px solid #558458;
    background: #558458;
font-style: normal;
	
}
	
a.btn_06 {
    display: block !important;
    width: 280px !important;
    /* marginは固定（hover時も絶対に変えない） */
    margin: 40px auto !important; 
    padding: 2rem 2rem !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 1.2rem !important;
    line-height: 1.6em !important;
    font-weight: bold !important;
    border-radius: 1vh !important;
    color: #fff !important;
    font-family: "corporate-logo-ver2", sans-serif !important;
    box-sizing: border-box !important;

    /* --- 立体デザイン --- */
    background: linear-gradient(to bottom, #76a879 0%, #558458 100%) !important;
    border: none !important;
    border-bottom: 7px solid #3d603f !important; 
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 8px 15px rgba(0, 0, 0, 0.1) !important;

    /* --- 位置固定のための設定 --- */
    position: relative !important;
    top: 0 !important;
    transition: transform 0.1s, border-bottom 0.1s, box-shadow 0.1s !important;
}

/* ロールオーバー時 */
a.btn_06:hover {
    /* marginは使わず、transformで自分だけを下にずらす */
    transform: translateY(4px) !important;
    
    /* 下がった分だけ厚みを減らす（これで底辺の位置が変わらない） */
    border-bottom: 3px solid #3d603f !important;
    
    /* 影を薄くして接地感を出す */
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 5px rgba(0, 0, 0, 0.2) !important;
    
    color: #fff !important;
    margin-top: 40px !important; /* 元のmarginと同じ値を指定して上書きを防ぐ */
}

/* クリック時 */
a.btn_06:active {
    transform: translateY(7px) !important;
    border-bottom: 0px solid #3d603f !important;
    box-shadow: none !important;
}	
	
	
}
/* max-width: 460px　END */


/*============================
.dlBtn(フロートボタン)
============================*/
.dlBtn {width: 320px;text-align: center;border-top: 5px solid #fff;border-left: 5px solid #fff;background: #FFECC3;position: fixed;right: -400px;bottom: 0;transition: right 0.5s ease, opacity 0.5s ease;z-index: 1000;border-top-left-radius: 12px;}
.dlBtn.onSlide {
    right: 0;
}
.dlBtn.hidden {opacity: 0;
    pointer-events: none;}
.dlBtn .btnMain {
    padding: 1.75rem 2rem 1.25rem;
}
.dlBtn .leadTxt {
    font-size: 1rem;
    color: #000;
    padding: 0 0 10px 0;

font-family: "corporate-logo-ver2", sans-serif;
font-weight: 700;
font-style: normal;
	
}
.dlBtn .leadList {}
.dlBtn .leadList .list {
    margin-top: 0.625rem;
}
.dlBtn .leadList .list a {text-decoration: none;background: #558458;color: #fff;font-size: 1rem;font-weight: bold;
	display: flex;align-items: center;padding: 0 0.875rem;line-height: 1.4;height: 73px;}
.dlBtn .btn {padding: 0;}
.dlBtn .btn a {font-size: 1.1rem;text-decoration: none;color: #fff;display: flex;
	align-items: center;justify-content: center;background: #558458;height: 63px;
	padding:10px; border-radius: 10px; border-bottom: #192352 solid 4px;
	font-family: "corporate-logo-ver2", sans-serif;	font-weight: 700; font-style: normal;}
.dlBtn .closeBtn {border: 0;padding: 0;background: none;position: absolute;top: 10px;right: 270px;}



@media(max-width:736px){
	
  .dlBtn {
      display: none;
  }
  .dlBtn.onSlide {
  }
  .dlBtn.hidden {}
  .dlBtn .btnMain {padding: 1rem 1.125rem 1rem;}
  .dlBtn .leadTxt {font-size: 0.625rem;}
  .dlBtn .leadList {}
  .dlBtn .leadList .list {
  }
  .dlBtn .leadList .list a {
      font-size: 0.625rem;
      height: 50px;
  }
  .dlBtn .btn {
      margin-top: 1rem;
  }
  .dlBtn .btn a {
      font-size: 1rem;
  }
  .dlBtn .btn a:before {margin-right: 0.2rem;padding-top: 0.2rem;}
  .dlBtn .closeBtn {
      width: 30px;
  }
    
  }
/*アコーディオン*/
.details {
	border-top: 2px solid #00a5a0;
	border-left: 2px solid #00a5a0;
	border-right: 2px solid #00a5a0;
	&:last-of-type {
		border-bottom: 2px solid #00a5a0;
	}
}
.details-summary {
	position: relative;
	display: block;
	padding: 20px;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	background-color: #04ADBB;
	&:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	.btn {
		position: absolute;
		top: 37%;
		left: 10%;
		width: 18px;
		height: 18px;
		transform-origin: center center;
		transition-duration: 0.2s;

		&:before,
		&:after {
			content: "";
			background-color: #fff;
			border-radius: 10px;
			width: 18px;
			height: 4px;
			position: absolute;
			top: 7px;
			left: 0;
			transform-origin: center center;
		}
		&:before {
			width: 4px;
			height: 18px;
			top: 0;
			left: 7px;
		}
	}
	&.is-active {
		.btn {
			-webkit-transform: rotate(-180deg);
			transform: rotate(-180deg);
			&:before {
				content: none;
			}
		}
	}
}

.details-summary::-webkit-details-marker {
	display: none;
}

.details-content {
	padding: 20px;
	p {
		margin: 0 0 20px;
		color: #000;
		font-size: 18px;
		text-align: left;
		&:last-of-type {
			margin: 0 0 0;
		}
	}
}
.mt10{
    margin-top: 40px;
}