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


/*-----------------------------------------------
　　共通
-----------------------------------------------*/

body{
	margin: 0 auto!important;
	font-family: "筑紫A丸ゴシック", sans-serif;
	color: #707070;
}
body #main .inner,footer .inner{
	margin: 0 auto;
	/*overflow: hidden;*/
	width: 1100px;
}
.inner-wide{
	margin: 0 auto;
	width: 1200px;
}
.inner-90{
	width: 90%;
}
.inner-sub{
	width: 80%;
	margin: 0 auto;
}

.sp{
	display: none!important;
}
.none{
	display: none!important;
}

a.pc-link_none{
	pointer-events: none;
	text-decoration: none;
}
a.pointer-events_none{
	pointer-events: none;
}


@media only screen and (max-width: 1200px) {
	body #main .inner,footer .inner{
		width: 900px;
	}
	.inner-wide{
		width: 1000px;
	}
}
@media only screen and (max-width: 1050px) {
	body #main .inner,footer .inner{
		width: 800px;
	}
	.inner-wide{
		width: 900px;
	}
}
@media only screen and (max-width: 900px) {
	body #main .inner,footer .inner{
		width: 700px;
	}
	.inner-wide{
		width: 750px;
	}
}
@media only screen and (max-width: 768px) {
	.pc{
		display: none!important;
	}
	.sp{
		display: inherit!important;
	}
	body #main .inner,footer .inner{
		width: 90%;
	}
	.inner-wide{
		width: 90%;
	}
	a.pc-link_none{
		pointer-events: auto;
		text-decoration: underline;
	}
	.inner-90{
		width: 100%;
		margin: 0 auto!important;
	}
	.inner-sub{
		width: 100%;
	}
}



/*-----------------------------------------------
　　中央揃え、左揃え、右揃え
-----------------------------------------------*/

.center{
	text-align: center!important;
}
.left{
	text-align: left!important;
}
.right{
	text-align: right!important;
}

.m-auto{
	margin: 0 auto!important;
}
.m-0auto00 /*要素全体を左寄せ*/{
	margin: 0 auto 0 0;
}
.m-000auto /*要素全体を右寄せ*/{
	margin: 0 0 0 auto;
}


@media only screen and (max-width: 768px) {
	.sp-center{
		text-align: center;
	}
	.sp-left{
		text-align: left;
	}
}


/*-----------------------------------------------
　　余白
-----------------------------------------------*/

.m0{
	margin: 0!important;
}
.mt0{
	margin-top: 0!important;
}
.mt10{
	margin-top: 10px!important;
}
.mt20{
	margin-top: 20px!important;
}
.mt30{
	margin-top: 30px!important;
}
.mt40{
	margin-top: 40px!important;
}
.mt50{
	margin-top: 50px!important;
}
.mt60{
	margin-top: 60px!important;
}
.mt70{
	margin-top: 70px!important;
}
.mt80{
	margin-top: 80px!important;
}
.mt90{
	margin-top: 90px!important;
}
.mt100{
	margin-top: 100px!important;
}
.mt150{
	margin-top: 150px!important;
}

.mb0{
	margin-bottom: 0!important;
}
.mb10{
	margin-bottom: 10px!important;
}
.mb20{
	margin-bottom: 20px!important;
}
.mb30{
	margin-bottom: 30px!important;
}
.mb40{
	margin-bottom: 40px!important;
}
.mb50{
	margin-bottom: 50px!important;
}
.mb60{
	margin-bottom: 60px!important;
}
.mb70{
	margin-bottom: 70px!important;
}
.mb80{
	margin-bottom: 80px!important;
}
.mb90{
	margin-bottom: 90px!important;
}
.mb100{
	margin-bottom: 100px!important;
}


.p0{
	padding: 0!important;
}
.pt0{
	padding-top: 0!important;
}
.pt10{
	padding-top: 10px!important;
}
.pt20{
	padding-top: 20px!important;
}
.pt30{
	padding-top: 30px!important;
}
.pt40{
	padding-top: 40px!important;
}
.pt50{
	padding-top: 50px!important;
}
.pt60{
	padding-top: 60px!important;
}
.pt70{
	padding-top: 70px!important;
}
.pt80{
	padding-top: 80px!important;
}
.pt90{
	padding-top: 90px!important;
}
.pt100{
	padding-top: 100px!important;
}

.pb0{
	padding-bottom: 0!important;
}
.pb10{
	padding-bottom: 10px!important;
}
.pb20{
	padding-bottom: 20px!important;
}
.pb30{
	padding-bottom: 30px!important;
}
.pb40{
	padding-bottom: 40px!important;
}
.pb50{
	padding-bottom: 50px!important;
}
.pb60{
	padding-bottom: 60px!important;
}
.pb70{
	padding-bottom: 70px!important;
}
.pb80{
	padding-bottom: 80px!important;
}
.pb90{
	padding-bottom: 90px!important;
}
.pb100{
	padding-bottom: 100px!important;
}




@media only screen and (max-width: 768px) {
	.sp_mt0{
		margin-top: 0px!important;
	}
	.sp_mt10{
		margin-top: 10px!important;
	}
	.sp_mt20{
		margin-top: 20px!important;
	}
	.sp_mt30{
		margin-top: 30px!important;
	}
	.sp_mt40{
		margin-top: 40px!important;
	}
	.sp_mt50{
		margin-top: 50px!important;
	}
	.sp_mt100{
		margin-top: 100px!important;
	}
	.sp_mb0{
		margin-bottom: 0px!important;
	}
	.sp_mb30{
		margin-bottom: 30px!important;
	}
	.sp_mb50{
		margin-bottom: 50px!important;
	}
}


/*-----------------------------------------------
　　文字
-----------------------------------------------*/

.text{ /*本文テキスト用*/
	font-size: 15px;
	color: #707070;
    line-height: 2;
	letter-spacing: 1px;
    font-family: "Noto Sans JP",sans-serif;
	margin: 0;
}


/*-----------------------------------------------
　　文字間、文字の太さ、文字色、背景色
-----------------------------------------------*/

.lh2{
	line-height: 2;
}
.lh1-8{
	line-height: 1.8;
}
.letter-1{
	letter-spacing: 1px;
}
.indent{
	padding-left: 1.5em;
    text-indent: -1.5em;
}
.indent-2{
	padding-left: 2em;
    text-indent: -2em;
}
.column-count{
	column-count: 2;
	column-gap: 3em;
}
.bold{
	font-weight: bold;
}
.normal{
	font-weight: normal!important;
}
.white{
	color: #fff!important;
}
.green{
	color: #2F8991;
}
.lightgreen{
	color: #6BB4BA;
}
.grey{
	color: #707070!important;
}

.marker span{
	background: linear-gradient(transparent 60%, #FFF084 60%);
}

.fs24{
	font-size: 24px;
}
.fs20{
	font-size: 20px;
}

@media only screen and (max-width: 768px) {
	.column-count{
		column-count: auto;
		column-gap: normal;
	}
	
}


/*-----------------------------------------------
　　背景
-----------------------------------------------*/

.white_area{
	background: #fff;
	box-shadow: 0px 4px 18px -15px #000000;
	border-radius: 30px;
	padding: 50px;
}

@media only screen and (max-width: 768px) {
	.white_area{
		padding: 30px 20px;
	}
	.fs24{
		font-size: 20px;
	}
	.fs20{
		font-size: 18px;
	}
}



/*-----------------------------------------------
　　区切り
-----------------------------------------------*/

.delimiter{
	margin: 80px 0;
	border-top: 1px solid #D3D3D3;
}

@media only screen and (max-width: 768px) {
	.delimiter{
		margin: 40px 0;
	}
}


/*-----------------------------------------------
　　見出し
-----------------------------------------------*/

h1.page_title{
	font-size: 40px;
	font-weight: 500;
}

h2.sec_title{
	font-size: 40px;
	font-weight: bold;
	color: #2F8991;
	position: relative;
	letter-spacing: 5px;
	padding-top: 30px;
}
h2.sec_title span{
	color: #fff;
	background: #2F8991;
	padding: 5px 15px;
    margin: 0 15px;
}
h2.sec_title::before{
	content: '';
    background: url(../img/pad.png);
    background-repeat: no-repeat;
    background-size: 75px;
    width: 75px;
    height: 70px;
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin: auto;
}
h3.sub_title{
	color: #2F8991;
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 40px 0;
}
h3.sub_title span{
	position: relative;
}
h3.sub_title span::before{
	content: '';
    background: url(../img/deco-l.png);
    background-repeat: no-repeat;
    background-size: 50px;
    width: 55px;
    height: 55px;
    position: absolute;
    left: -75px;
}
h3.sub_title span::after{
	content: '';
    background: url("../img/deco-r.png");
    background-repeat: no-repeat;
    background-size: 50px;
    width: 55px;
    height: 55px;
    position: absolute;
    right: -70px;
}



@media only screen and (max-width: 768px) {
	h1.page_title{
		font-size: 30px;
		margin-bottom: 0;
	}
	h2.sec_title{
		font-size: 24px;
		margin: 20px 0;
		padding-top: 10px;
	}
	h2.sec_title span{
		padding: 5px 10px;
		margin: 0 10px;
	}
	h2.sec_title::before{
		background-size: 60px;
		width: 60px;
		height: 55px;
	}
	h3.sub_title{
		font-size: 24px;
		margin: 20px 0;
	}
	h3.sub_title span::before{
		bottom: -8px;
		left: -95px;
		background-size: 45px;
	}
	h3.sub_title span::after{
		bottom: -8px;
		right: -55px;
		background-size: 45px;
	}
	h3.sub_title.deco-1 span::before{
		left: -65px;
	}
	h3.sub_title.deco-2 span::before{
		left: -88px;
	}
	h3.sub_title.deco-3 span::before{
		left: -65px;
	}
	h3.sub_title.deco-4 span::before{
		left: -58px;
	}
	h3.sub_title.deco-4 span::after{
		right: -65px;
	}
}




/*-----------------------------------------------
　　ボタン
-----------------------------------------------*/

.btn{
	font-size: 24px;
    color: #707070!important;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,224,0,1) 0%, rgba(255,240,132,1) 100%);
    padding: 30px 65px 30px 20px!important;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 3px;
    position: relative;
	display: block;
	text-align: center;
}
.btn:before {
    content: '';
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;
    margin: auto;
}
.btn:after {
    font-size: 16px;
    content: '→';
    position: absolute;
    color: #707070;
    right: 34px;
    top: 37px;
    font-weight: bold;
}


@media only screen and (max-width: 1050px) {
	.btn{
		font-size: 20px;
		letter-spacing: 2px;
	}
	.btn:after{
		top: 33px;
	}
}

@media only screen and (max-width: 900px) {
	.btn:after{
		top: 48px;
	}
}

@media only screen and (max-width: 768px) {
	.btn{
		width: 100%;
		font-size: 18px;
		padding: 20px 65px 20px 15px!important;
		letter-spacing: 1px;
	}
	.btn:before{
		right: 20px;
	}
	.btn:after{
		top: 22px;
    	right: 25px;
	}	
}




/*-----------------------------------------------
　　カラム
-----------------------------------------------*/

.flex_2_b,.flex_2_f,.flex_3_b,.flex_3_f,.flex_4_b,.flex_4_f,.flex_5_b,.flex_5_f,.flex_6_b,.flex_6_f{
	display: flex;
  	flex-wrap: wrap;
	justify-content: flex-start;
}
.flex_2_item,.flex_3_item,.flex_4_item,.flex_5_item,.flex_6_item{
	box-sizing: border-box;
}

.flex_2_item {
    width: 48.5%;
    margin-bottom: 10px;
    margin-right: 3%;
}
.flex_2_item:nth-child(2n){
	margin-right: 0;
}
.reverse{
	flex-direction: row-reverse;
}
.reverse .flex_2_item{
	margin-right: 0;
	margin-left: 3%;
}
.reverse .flex_2_item:nth-child(2n){
	margin-left: 0;
}

.flex_3_item {
 	width: 31.33%;
    margin-bottom: 10px;
    margin-right: 3%;
}
.flex_3_item:nth-child(3n){
	margin-right: 0;
}

.flex_4_item {
    width: 22.75%;
	margin-bottom: 10px;
	margin-right: 3%;
}
.flex_4_item:nth-child(4n){
	margin-right: 0;
}

.flex_5_item {
    width: 17.6%;
	margin-bottom: 10px;
	margin-right: 3%;
}
.flex_5_item:nth-child(5n){
	margin-right: 0;
}

.flex_6_item {
    width: 12%;
	margin-bottom: 10px;
	margin-right: 3%;
}
.flex_6_item:nth-child(5n){
	margin-right: 0;
}

.ratio4-6{
	justify-content: space-between;
}
.ratio4-6 .flex_2_item:nth-child(1){
	width: 38%;
}
.ratio4-6 .flex_2_item:nth-child(2){
	width: 58%;
}

.ratio6-4{
	justify-content: space-between;
}
.ratio6-4 .flex_2_item:nth-child(1){
	width: 58%;
}
.ratio6-4 .flex_2_item:nth-child(2){
	width: 38%;
}

.ratio3-7{
	justify-content: space-between;
}
.ratio3-7 .flex_2_item:nth-child(1){
	width: 28%;
}
.ratio3-7 .flex_2_item:nth-child(2){
	width: 68%;
}

.ratio7-3{
	justify-content: space-between;
}
.ratio7-3 .flex_2_item:nth-child(1){
	width: 68%;
}
.ratio7-3 .flex_2_item:nth-child(2){
	width: 28%;
}

.ratio2-8{
	justify-content: space-between;
}
.ratio2-8 .flex_2_item:nth-child(1){
	width: 18%;
}
.ratio2-8 .flex_2_item:nth-child(2){
	width: 78%;
}

.ratio1-9{
	justify-content: space-between;
}
.ratio1-9 .flex_2_item:nth-child(1){
	width: 11%;
}
.ratio1-9 .flex_2_item:nth-child(2){
	width: 85%;
}

.flex{
	display: flex;
}
.sp-flex{
	display: inline-flex;
}
.block{
	display: block;
}
.jc-center{
	justify-content: center;
}
.jc-end{
	justify-content: flex-end;
}
.jc-between{
	justify-content: space-between;
}
.wrap-none{
	flex-wrap: nowrap;
}
.wrap{
	flex-wrap: wrap;
}


.clear{
	clear: both;
}


@media only screen and (max-width: 768px) {

/*スマホのときblockにする*/
.flex_2_b,.flex_3_b,.flex_4_b{
	display: block;
}
.flex_2_b .flex_2_item,.flex_3_b .flex_3_item,.flex_4_b .flex_4_item,.flex_5_b .flex_5_item{
	width: 100%;
	margin-right: 0;
}
.reverse .flex_2_item{
	width: 100%;
	margin-left: 0;
}
.flex_2_b .flex_2_item + .flex_2_item,.flex_3_b .flex_3_item + .flex_3_item,.flex_4_b .flex_4_item + .flex_4_item,.flex_5_b .flex_5_item + .flex_5_item{
	margin-top: 10px;
}

/*スマホのときflexのまま*/
.flex_2_f,.flex_3_f,.flex_4_f{
	margin: 0;
}

/*スマホのとき横2*/
.sp_2clm{
	justify-content: space-between;
}
.sp_2clm .flex_3_item,.sp_2clm .flex_4_item,.sp_2clm .flex_5_item{
	width: 48.5%;
}
.sp_2clm .flex_3_item:nth-child(2n),.sp_2clm .flex_4_item:nth-child(2n),.sp_2clm .flex_5_item:nth-child(2n){
	margin-right: 0;
}
	
.ratio4-6 .flex_2_item:nth-child(1),.ratio4-6 .flex_2_item:nth-child(2),
.ratio6-4 .flex_2_item:nth-child(1),.ratio6-4 .flex_2_item:nth-child(2),
.ratio3-7 .flex_2_item:nth-child(1),.ratio3-7 .flex_2_item:nth-child(2),
.ratio7-3 .flex_2_item:nth-child(1),.ratio7-3 .flex_2_item:nth-child(2),
.ratio2-8 .flex_2_item:nth-child(1),.ratio2-8 .flex_2_item:nth-child(2),
.ratio1-9 .flex_2_item:nth-child(1),.ratio1-9 .flex_2_item:nth-child(2){
	width: 100%;
}
	
.sp-block{
	display: block;
}
.sp-flex{
	display: flex;
}
.column-reverse{
	display: flex;
	flex-direction: column-reverse;
}
	
}


/*-----------------------------------------------
　　リンク
-----------------------------------------------*/

a.text_none{
	text-decoration: none;
}



/*-----------------------------------------------
　　ホバー
-----------------------------------------------*/

a:hover{
	opacity: 0.7;
	cursor: pointer;
}


/*-----------------------------------------------
　　画像、動画
-----------------------------------------------*/

img.img-100{
	width: 100%;
}
img.img-80{
	width: 80%;
}
.video-100 iframe{
	width: 100%;
	height: 600px;
}
.video-80 iframe{
	width: 80%;
	height: 400px;
}

.wd-100{
	width: 100%!important;
}

@media only screen and (max-width: 768px) {
	img.img-80{
		width: 100%;
	}
	.video-100 iframe,.video-80 iframe{
		width: 100%;
		height: 200px;
	}
}


/*-----------------------------------------------
　　配置
-----------------------------------------------*/

.dis-table{
	display: table;
}
.dis-table .posi-btm{
	display: table-cell;
	vertical-align: bottom;
}
.dis-table .posi-center{
	display: table-cell;
	vertical-align: center;
}
.dis-table .posi-base{
	display: table-cell;
	vertical-align: baseline;
}
.dis-table .posi-middle{
	display: table-cell;
	vertical-align: middle;
}



/*-----------------------------------------------
　　表
-----------------------------------------------*/

.table{
	width: 100%;
	border-collapse: collapse;
}
.table th{
	width: 25%;
	font-weight: bold;
	border: 1px solid #E7E7E8;
	padding: 15px;
	text-align: left;
	border-left: none;
    border-right: none;
	color: #2F8991;
}
.table td{
	width: 75%;
	border: 1px solid #E7E7E8;
	padding: 20px;
	border-left: none;
    border-right: none;
	font-family: "Noto Sans JP", sans-serif;
}

@media only screen and (max-width: 768px) {
	.table th,.table td{
		width: auto;
    	display: block;
    	padding: 10px;
	}
	.table th{
		border-bottom: none;
		background: #ECF3F4;
	}
	.table td{
		border-bottom: none;
	}
	.table tr:last-child td{
		border-bottom: 1px solid #E7E7E8!important;
	}
}