@charset "utf-8";


/*#5BD0D7 メインカラー　水色
#2B374B　暗色
#F9F871　サブカラー　黄色
*/



/*基本設定*/
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
　overflow-x: hidden;
}
body {
  color: #2B374B;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  font-size: 1.6em; /*親要素の何倍→大元が62.5％の場合は=px(1.6em=16px)*/
  line-height: 2.4rem; /*「ルートem」=大元で設定されているサイズの何倍か→大元を62.5％なら=px（2.4rem=24px）*/
  text-align: center;
}


.main-h1{
	margin-top:60px;
	font-size: 3.8rem;
	line-height:40px;
}
@media(max-width:1200px){
	.main-h1{
		text-align:left;
		padding-left:5px;
	}
}
	
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.wp-block-columns {
  gap: 2rem;
}
	
	
section h2 { 
  font-size: 2.4rem;
}
.main-h2{
	font-size: 2.4rem;
	border-bottom:solid 3px #5BD0D7;
	margin-bottom:20px;
}

.section-single-main
{display:block;
	max-width:1200px;
	width:95%;
	margin:60px auto;
}

*{
  box-sizing: border-box; /*width等はborderまでを含む幅となる*/
}


/*背景色*/
.bg-w{background-color:#ffffff;}
.bg-g{background-color:#5BD0D7;}
.bg-sub{background-color:#F9F871;}
.bg-lg{background-color:#79867F;}
.bg-dg{background-color:#2B374B;}
.bg-f5{
	display:inline-block;
	background-color:#f5f5f5;
	margin:5px;
}

/*文字色*/
.tx-w{color:#ffffff;}
.tx-sub{color:#F9F871;}
.tx-g{color:#5BD0D7;}
.tx-lg{color:#79867F;}
.tx-dg{color:#2B374B;}

.nb{text-decoration:none;}

/*文字サイズ*/
p{font-size:1.8rem;
 line-height:3.24rem;}
.b{font-weight:700;}
.tx-12{font-size:1.2rem;}
.tx-20{font-size:2.0rem;}
.tx-24{font-size:2.4rem;}
.tx-36{font-size:3.6rem;
		line-height:6.48rem;}

.lh-2{line-height:2.0rem}


/*文字寄せ*/
.tx-c{text-align:center;}
.tx-l{text-align:left;}
.tx-r{text-align:right;}
.va-b{vertical-align:bottom;}
.va-m{vertical-align:middle;}


/*マージン*/
.m0a{margin:0 auto;}
.mt60{margin-top:60px;}
.mt30{margin-top:30px;}
.mt20{margin-top:20px;}
.mt10{margin-top:10px;}
.m5{margin:5px;}
.p5{padding:5px;}
.mb10{margin-bottom:10px;}
.mb60{margin-bottom:60px;}
.mb30{margin-bottom:30px;}
.mb120{margin-bottom:120px;}
.ml5{margin-left:5px;}





/*レイアウト*/
.parent{
	display:flex;
	flex-wrap : wrap;
	margin:0 auto;
}
.child{
	width:50%;
	margin:0 auto;
}
.child-3{
	width:33.3%;
	margin:0 auto;
}

.width-200{
	width:200px;
}
.width-600{
	width:600px;
}
.sp-npc{
		display:none;
	}
@media(max-width:1200px){
	.width-200,.width-600{
	width:100%;
}
	.sp-npc{
		display:block;
	}
}

.pc-nsp{
		display:block;
	}
@media(max-width:1200px){
	.pc-nsp{
		display:none;
	}
}





.height-100{
	height:100px;
}

/*ボタン*/
.btn{/*シンプル*/
	display:inline-block;
	width:240px;
	height:50px;
	color:white;
	background-color:#2B374B;
	border-radius:40px;
	line-height:50px;
	text-align:center;
	border-bottom:solid 4px rgba(67,73,58,0.1);
	border-right:solid 4px rgba(67,73,58,0.1);
}
.btn:hover{
	background-color:#5BD0D7;
	border-bottom:solid 0px rgba(0,0,0,0.2);
	border-right:solid 0px rgba(0,0,0,0.2);
}

.btn-bs,
a.btn-bs,
button.btn-bs {/*付箋風*/
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
}

a.btn-flat {
  margin:10px;
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #000;
  border-radius: 0;
  border:solid 1px #000;
  background: #fff;
}

a.btn-flat span {
  position: relative;
}
a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #5BD0D7;
}
a.btn-flat:hover{
	 color:white;
}
a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}






.btn-inquiry{/*問合せ*/
	display:inline-block;
	width:80%;	
	color:white;
	background-color:#5BD0D7;
	border-radius:5px;
	text-align:center;
	vertical-align:middle;
	border-bottom:solid 4px rgba(67,73,58,0.1);
	border-right:solid 4px rgba(67,73,58,0.1);
	padding:10px;
}
.btn-inquiry:hover{
	background-color:#2B374B;
	border-bottom:solid 0px rgba(0,0,0,0.2);
	border-right:solid 0px rgba(0,0,0,0.2);
}





















/*ヘッダー*/
header{
	background-color:#5BD0D7;
	position: relative;
}
.header-wrapper{
	display:flex;
	max-width:1200px;
	width:100%;
	height:80px;
	margin:0 auto;
	}

.header-title{width:500px;
    margin-left:0px;
	text-align:left;}
.header-title p a{
	font-size:2.8rem;
	line-height:50px;
	vertical-align:middle;
	color:white;
	text-decoration:none;
	}
@media(max-width:1200px){
	.header-title p a{
		font-size:2.4rem;}
}

.header-menu{
	width:700px;
}
@media(max-width:1200px){
	.header-menu{
		display:none;
	}
}
.menu{
	display:flex;
	list-style:none;
	max-width: 700px;
    width:100%;
    height:80px;
    margin: 0 auto;
}
.menu > li.menu__single {
    position: relative;
	width:20%;
}

.menu__single a{
	color:white;
	font-size:1.5rem;
	font-weight:600;
	text-decoration:none;
	line-height:80px;
	vertical-align:middle;
	padding-right:10px;
}
.menu__single a:hover{	
	display:inline;
	color:#F9F871;
	height:80px;
}

.menu__second-level{
	visibility: hidden;
    opacity: 0;
    z-index: 1;
}
li.menu__single:hover ul.menu__second-level{
    top: 10px;
    visibility: visible;
    opacity: 1;
	margin-top:0px;
	padding-top:0px;
}
.menu__second-level li{
	list-style:none;
	background-color:#2B374B;
	height:50px;
}
.menu__second-level li a{
	line-height:50px;
	vertical-align:middle;
	color:#ffffff;
}
.menu__second-level li a:hover{
	color:#ffffff;
}

/*スマホ用メニュー*/
#menu-btn-check{
display:none;
}

.menu-btn {
    position: fixed;
    bottom: 10px;
    left: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
background-color:#5BD0D7;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color:rgba(0,0,0,0.5);
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border: solid 2px #ffffff;
border-radius:5px;
    list-style: none;
margin:10px;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 10px;
    position: relative;
}
.menu-content ul li a:hover{
background-color:#2B374B;
color:white;
}
	

.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

.menu-content {
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color:black;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
display:block;
}







/*テーブル*/
.table-01{
 margin:0 auto;
 text-align: left;
 border-collapse: collapse;
 border-spacing: 0;
 background-color:#ffffff;
}
.table-01 th {
 padding: 10px;
 background-color:#2B374B;
 color:#ffffff;
 border: solid 1px #ffffff;
}
.table-01 td {
 padding: 10px;
 border: solid 1px #ffffff;
}
.table-01 tr:nth-child(2n+1) {
 background: #f5f5f5;
}



.table-02{
 margin:0 auto;
 text-align: left;
 border-collapse: collapse;
 border-spacing: 0;
 background-color:#ffffff;
}
.table-02 th {
 padding: 10px;
 background-color:#2B374B;
 color:#ffffff;
 border: solid 1px #ffffff;
}
.table-02 td {
 padding: 10px;
 border: solid 1px #ffffff;
}
.table-02 tr:nth-child(2n+1) {
 background: #f5f5f5;
}



/*フッター*/
footer{
	margin-top:0;
	padding-top:0;
	color:#ffffff;
}

.footer_bgc{
	background-color:#5BD0D7;
	height:195px;
	}

.footer_wrapper{
	display:flex;
	max-width:1200px;
	width:100%;
	margin:0 auto;
}

.footer_address{
	max-width:600px;
	width:50%;
	text-align:left;
	padding-left:24px;
}
address{
	margin-top:10px;
	font-style: normal;
}
.footer_address_list{
	margin-top:20px;
	list-style:none;
}
.footer_address_list li a{
	text-decoration:none;
	color:#ffffff;
}
.footer_address-sns{
	margin-top:20px;
	font-size:2.4rem;
	padding-bottom:50px;
}
.footer_sitemap{
	max-width:600px;
	width:50%;
}
.footer_sitemap_list{
	list-style:none;
	display:flex;
	flex-wrap :wrap;
	max-width:600px;
	padding-bottom:50px;
}
.footer_sitemap_list li a{
	display:inline-block;
	font-weight:600;
	text-decoration:none;
	color:#ffffff;
	width:200px;
	margin-top:30px;
	text-align:left;
}

.footer_sitemap_list li ul{
	list-style:none;
}
.footer_sitemap_list li ul li a{
	font-weight:500;
	text-decoration:none;
	color:#ffffff;
	margin-top:0px;
	padding-left:5px;
	text-align:left;
}
.footer_inquiry_list{
	margin-top:30px;
	text-align:right;
	list-style:none;
}
.footer_inquiry_list a{
	font-weight:500;
	text-decoration:none;
	color:#ffffff;
	margin-top:0px;
	padding-left:5px;
	text-align:left;
}


.footer_copyright{
	background-color:#2B374B;
	color:#ffffff;
	width:100%;
	height:50px;
	font-size:1.2rem;
}

@media(max-width:1200px){
	.footer_wrapper{
		display:block;}
	.footer_bgc{
		height:auto;
	}
	.footer_address{
		display:block;
		width:100%;
		margin-top:20px;
	}
	.footer_sitemap{
		display:block;
		width:100%;
		margin-right:10px;
	}
	.footer_copyright{
		height:auto;
	}
}

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: rgba(0,0,0,0.8);
    border: solid 0px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}





/*スクロール時アニメーション*/
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}



.examplelist-div{
	width:400px;
	max-width:95%;
	  float: left;
}



/*帯*/
.band_main-color{
	background-color:#5BD0D7;
	line-height:30px; 
	color:white; 
	font-weight:bold; 
	text-align:left; 
	padding-left:10px;}


/*流れ*/
div.step-p{display:block; vertical-align:middle;}
@media(min-width: 1170px){
	div.step-p{display:flex; vertical-align:middle;}
}

.circle-step {margin:0 auto;
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  background: #5BD0D7;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
@media(min-width: 1170px){
	div.circle-step{margin:10px 0px;}
}

.circle-step > .circle-txt1 {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 0.1;
}
.circle-step > .circle-txt2 {
  display: block;
  width: 100%;
  margin-top: 20px;
	font-weight:bold;
	line-height: 0.1;
}

div.step-c{background: #F5F5F5; margin:10px 0px; padding:20px; border-radius: 10px; width:90%;}
@media(min-width: 1170px){
	div.step-c{width:85%; margin-left:5px;}}



* {
	float: none;
	position: static;
}

ul{text-align:left;
margin-left:20px;}