@charset "utf-8";

/* clear - クリア
===============================================================*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,b, i, dl, dt, dd, ol, a, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
}
html, body{height: auto;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
	display:block;
}
*, *::before, *::after { box-sizing: border-box; }
*:focus {outline: none;}
a {-webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
i, u, abbr, code, pre, address{font-weight: normal; font-style: normal; text-decoration: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';}
input, select {vertical-align:middle;}
button:hover img{opacity: .85;}
button {display: inline-block; text-align: center; text-decoration: none;	outline: none;}
button::before,button::after {position: absolute;	z-index: -1; display: block;	content: '';}
button,button::before,button::after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	-webkit-transition: all .3s;	transition: all .3s;}
button:hover{cursor: pointer;}
ul, ol, li{list-style: none;}
table {border-collapse:collapse; border-spacing:0;}
img{max-width: 100%; height: auto;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}

/* redefine - 再定義
===============================================================*/
html{
	width: 100%;
	font-size: 62.5%;
}
body {
	font-family: 'Noto Sans JP', BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-weight: 400;
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height:1;
}
h1, h2, h3, h4, h5, h6{word-break: break-all; font-weight: normal; font-size: 1.4rem; margin: 0;}

a{
	color: #50a5c9;
	text-decoration: none;
	-webkit-transition: all .3s;
	transition: all .3s;
}
a:hover{opacity: .85; color: #369597;}
a:hover img{opacity: .85;}

sup {vertical-align: super; font-size: smaller;}
sub {vertical-align: sub; font-size: smaller;}
img{image-rendering: -webkit-optimize-contrast;}


/* layout - 共通レイアウト
===============================================================*/
.wrap{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 10px;
	padding-left: 10px;
}
.wrap1200{max-width: 1220px;}
.wrap1100{max-width: 1120px;}
.wrap1000{max-width: 1020px;}
.wrap900{max-width: 920px;}
.wrap800{max-width: 820px;}

/*article*/
.article{font-size: 1.4rem; line-height: 1.7;}

/* classes - 汎用クラス
===============================================================*/
/*sp-pc*/
.sp-only{display: none;}
.pc-only{display: block;}

/*width*/
.w-100{width: 100%;}
.w-80{width:80%;}
.w-75{width: 75%;}
.w-66{width: 66%;}
.w-60{width: 60%;}
.w-50{width: 50%;}
.w-49_75{width: 49.75%;}
.w-49_5{width: 49.5%;}
.w-48{width: 48%;}
.w-40{width: 40%;}
.w-33{width: 33%;}
.w-32{width: 32%;}
.w-30{width: 30%;}
.w-28{width: 28%;}
.w-25{width: 25%;}
.w-24{width: 24%;}
.w-20{width: 20%;}
.w-10{width: 10%;}
.w-auto{width: auto;}

/*column*/
.col2Wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}
.col2Item{margin-bottom: 2rem; width: 48%;}
@media (max-width: 600px) {
	.col2Item{width: 100%;}
}


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

/*font*/
.serif{font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", 'Sawarabi Mincho', serif !important;}
.gothic{font-family: BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;}
.natosan{font-family: 'Noto Sans JP', BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif !important;}
.natoser{font-family: 'Noto Serif JP', Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", 'Sawarabi Mincho', serif !important;}

.fw-bold{font-weight: bold !important;}
.fw-normal{font-weight: normal !important;}
.td-under{text-decoration: underline !important;}
.td-wavy{text-decoration: underline wavy !important;}
.td-over{text-decoration: underline overline !important;}
.td-dot{text-decoration: underline dotted !important;}
.td-middle{text-decoration: line-through !important;}

/*font-size*/
.f-12{font-size: 1.2rem;}
.f-14{font-size: 1.4rem;}
.f-16{font-size: 1.6rem;}
.f-18{font-size: 1.8rem;}
.f-20{font-size: 2.0rem;}
.f-22{font-size: 2.2rem;}
.f-24{font-size: 2.4rem;}
.f-26{font-size: 2.6rem;}
.f-28{font-size: 2.8rem;}
.f-30{font-size: 3.0rem;}
.f-32{font-size: 3.2rem;}
.f-34{font-size: 3.4rem;}
.f-36{font-size: 3.6rem;}

/*font-color*/
.fc-white{color: #fff !important;}
.fc-black{color: #000!important;}
.fc-red, .is-error{color: #a04141;}
.fc-gray{color: #919191;}

/*background*/
.bg-white{background: #fff !important;}
.bg-grad{
	background-image: -moz-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -ms-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
}

/*margin*/
.mg0a{margin: 0 auto !important;}
.mg0{margin: 0 !important;}
.mg10{margin: 10px !important;}
.mg20{margin: 20px !important;}
.mg30{margin: 30px !important;}
.mg40{margin: 40px !important;}
.mg50{margin: 50px !important;}
.mg60{margin: 60px !important;}
.mg70{margin: 70px !important;}
.mg30{margin: 80px !important;}
.mg90{margin: 90px !important;}
.mg100{margin: 100px !important;}

.mgT0{margin-top: 0px !important;}
.mgT10{margin-top: 10px !important;}
.mgT20{margin-top: 20px !important;}
.mgT30{margin-top: 30px !important;}
.mgT40{margin-top: 40px !important;}
.mgT50{margin-top: 50px !important;}
.mgT60{margin-top: 60px !important;}
.mgT70{margin-top: 70px !important;}
.mgT80{margin-top: 80px !important;}
.mgT90{margin-top: 90px !important;}
.mgT100{margin-top: 100px !important;}

.mgT1rem{margin-top: 1rem !important;}
.mgT2rem{margin-top: 2rem !important;}
.mgT3rem{margin-top: 3rem !important;}
.mgT4rem{margin-top: 4rem !important;}
.mgT5rem{margin-top: 5rem !important;}


.mgB0{margin-bottom: 0px !important;}
.mgB5{margin-bottom: 5px !important;}
.mgB10{margin-bottom: 10px !important;}
.mgB20{margin-bottom: 20px !important;}
.mgB30{margin-bottom: 30px !important;}
.mgB40{margin-bottom: 40px !important;}
.mgB50{margin-bottom: 50px !important;}
.mgB60{margin-bottom: 60px !important;}
.mgB70{margin-bottom: 70px !important;}
.mgB80{margin-bottom: 80px !important;}
.mgB90{margin-bottom: 90px !important;}
.mgB100{margin-bottom: 100px !important;}

.mgLa{margin-left: auto !important;}
.mgL0{margin-left: 0px !important;}
.mgL10{margin-left: 10px !important;}
.mgL20{margin-left: 20px !important;}
.mgL30{margin-left: 30px !important;}
.mgL40{margin-left: 40px !important;}
.mgL50{margin-left: 50px !important;}
.mgL10{margin-left: 10px !important;}
.mgL20{margin-left: 20px !important;}
.mgL30{margin-left: 30px !important;}
.mgL40{margin-left: 40px !important;}
.mgL50{margin-left: 50px !important;}

.mgRa{margin-right: auto !important;}
.mgR0{margin-right: 0px !important;}
.mgR10{margin-right: 10px !important;}
.mgR20{margin-right: 20px !important;}
.mgR30{margin-right: 30px !important;}
.mgR40{margin-right: 40px !important;}
.mgR50{margin-right: 50px !important;}
.mgR60{margin-right: 60px !important;}
.mgR70{margin-right: 70px !important;}
.mgR80{margin-right: 80px !important;}
.mgR90{margin-right: 90px !important;}
.mgR100{margin-right: 100px !important;}


/*padding*/
.pa0{padding: 0 !important;}
.pa5{padding: 5px !important;}
.pa10{padding: 10px !important;}
.pa20{padding: 20px !important;}
.pa30{padding: 30px !important;}
.pa40{padding: 40px !important;}
.pa50{padding: 50px !important;}
.pa60{padding: 60px !important;}
.pa70{padding: 70px !important;}
.pa80{padding: 80px !important;}
.pa90{padding: 90px !important;}
.pa100{padding: 100px !important;}

.paT0{padding-top: 0px !important;}
.paT10{padding-top: 10px !important;}
.paT20{padding-top: 20px !important;}
.paT30{padding-top: 30px !important;}
.paT40{padding-top: 40px !important;}
.paT50{padding-top: 50px !important;}
.paT60{padding-top: 60px !important;}
.paT70{padding-top: 70px !important;}
.paT80{padding-top: 80px !important;}
.paT90{padding-top: 90px !important;}
.paT100{padding-top: 100px !important;}

.paB0{padding-bottom: 0px !important;}
.paB10{padding-bottom: 10px !important;}
.paB20{padding-bottom: 20px !important;}
.paB30{padding-bottom: 30px !important;}
.paB40{padding-bottom: 40px !important;}
.paB50{padding-bottom: 50px !important;}
.paB60{padding-bottom: 60px !important;}
.paB70{padding-bottom: 70px !important;}
.paB80{padding-bottom: 80px !important;}
.paB90{padding-bottom: 90px !important;}
.paB100{padding-bottom: 100px !important;}

.paL0{padding-left: 0px !important;}
.paL10{padding-left: 10px !important;}
.paL20{padding-left: 20px !important;}
.paL30{padding-left: 30px !important;}
.paL40{padding-left: 40px !important;}
.paL50{padding-left: 50px !important;}
.paL60{padding-left: 60px !important;}
.paL70{padding-left: 70px !important;}
.paL80{padding-left: 80px !important;}
.paL90{padding-left: 90px !important;}
.paL100{padding-left: 100px !important;}

.paR0{padding-right: 0px !important;}
.paR10{padding-right: 10px !important;}
.paR20{padding-right: 20px !important;}
.paR30{padding-right: 30px !important;}
.paR40{padding-right: 40px !important;}
.paR50{padding-right: 50px !important;}
.paR60{padding-right: 60px !important;}
.paR70{padding-right: 70px !important;}
.paR80{padding-right: 80px !important;}
.paR90{padding-right: 90px !important;}
.paR100{padding-right: 100px !important;}

/*indent*/
.indent_1{text-indent: -1em; margin-left:1em;}
.indent_2{text-indent: -2em; margin-left:2em;}
.indent_3{text-indent: -3em; margin-left:3em;}
.indent_4{text-indent: -4em; margin-left:4em;}
.indent_5{text-indent: -5em; margin-left:5em;}

/*anchor*/
.anchor {
	padding-top: 150px !important;
	margin-top: -150px !important;
}
/*ul*/
ul.list-disc li{list-style: disc; margin-left: 20px;}
ul.list-square li{list-style: square; margin-left: 20px;}
ul.list-circle li{list-style: circle; margin-left: 20px;}
ul.list-grad, ul.list-error{margin-left: 2rem;}
ul.list-grad li::before{
	background-image: -moz-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -ms-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	width: .8em;
	height: .8em;
	margin-right: .3em;
	border-radius: 50%;
	display: inline-block;
	content: "";
}
ul.list-error li::before{
	background: #a04141;
	width: .8em;
	height: .8em;
	margin-right: .3em;
	border-radius: 50%;
	display: inline-block;
	content: "";
}
ul.banner-list li{margin-bottom: 2rem;}

/*display*/
.display-none{display: none;}
.display-block{display: block;}
.display-flex{display: flex;}

/*display: flex;*/
.fl_w_sb{display: flex; flex-wrap: wrap; justify-content: space-between;}
.fl_w_fs{display: flex;	flex-wrap: wrap; justify-content: flex-start;}

/*load + scroll*/
.scroll-fade{opacity: 0; transition: all 2s;}
.scroll-up{opacity: 0; transform: translateY(100px); transition: all 2s;}
.scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}
.load-fade {opacity : 0; transition : all 2s;}
.load-up{opacity: 0; transform: translateY(100px); transition: all 2s;}
.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}

.lv-circle {
	position: relative;
	display: inline-block;
	font-size: 2.6rem;
	font-weight: bold;
	text-align: left;
	margin-top: 4rem;
	margin-left: 5rem;
	line-height: 1.5;
}
.lv-circle::before {
    position: absolute;
	content: url(../../assets/images/common/top-about-circle.png);
    transform: scale(0.5);
    left: -91px;
    top: -71px;
	z-index: -1;
}
@media (max-width: 600px){
	.lv-circle{
		margin-top: 3rem;
	}
}
.lv-title{
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 2rem;
}

.sub-heading {
    font-size: 2.3rem;
    font-weight: bold;
    text-align: left;
    margin: 6rem 0 2rem;
	padding: 0 0 0 1rem;
	border-left: 1rem solid #58B4CB;
}

.plugin_form{
	background-image: -moz-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -ms-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	padding: 3rem;
	width: 100%;
	max-width: 800px;
	margin: 5rem auto;
}
.plugin_form fieldset{
	background: rgba(255,255,255,.8);
	padding: 3rem;
}
.plugin_form legend{
	display: none;
}
.plugin_form dl{
	display: flex;
	flex-wrap: wrap;
	font-size: 1.6rem;
}
.plugin_form dt{
	width: 30%;
	text-align: right;
	padding-top: 1rem;
	margin-bottom: 1rem;
}
.plugin_form dd{
	width: 70%;
	padding-left: 2rem;
	margin-bottom: 1rem;
}
.plugin_form input[type="text"], .plugin_form input[type="password"]{
	padding: 1rem;
	font-size: 1.6rem;
	border: 0;
	border-radius: 0;
	outline: none;
	background: #fff;
	width: 100%;
}
.plugin_form input[type="checkbox"]{
	width: 2rem;
	height: 2rem;
	border: 0;
}
.plugin_form label{
	display: flex;
	align-items: center;
}
.plugin_form button{
	padding: 2rem 1rem;
	font-size: 1.6rem;
	border: 0;
	border-radius: 0;
	outline: none;
	width: 100%;
	max-width: 30rem;
	margin: 2rem auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background: #fff;
}
.plugin_form button::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: -moz-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -ms-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	z-index: 1;
}
.plugin_form button span{
	color: #fff;
	position: relative;
	z-index: 2;
}
.plugin_form button:hover{
	box-shadow: 0px 0px 15px -5px #52af8e;
}
.plugin_form button:hover span{
	color: #52af8e;
}
.plugin_form button:hover::before{
	left: 100%;
}
.plugin_form a{
	color: #575757;
	text-decoration: underline;
}
.plugin_form a:hover{
	color: #52af8e;
}
.plugin_form .list-error{
	margin-bottom: 2rem;
	font-size: 1.6rem;
}

.anchor_menu {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.anchor_menu .child-menu {
    width: 24%;
    font-weight: bold;
    line-height: 1.2;
    font-size: 1.6rem;
    margin-bottom: 10px;
    margin-right: 1%;
    text-align: center;
    border: 2px solid rgb(84,185,87) ;
    border-image: linear-gradient(to right, rgb(80,165,201), rgb(84,185,87) );
    border-image-slice: 1;
}
.anchor_menu .child-menu a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
	padding: 1.5rem 0 2rem;
	color: #369597;
}
.anchor_menu .child-menu a:hover{
	color: #52ae93;
}
.anchor_menu .child-menu a:after {
    content: '';
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #52af8e;
    border-right: 3px solid #52af8e;
    transform: rotate(45deg);
    position: absolute;
    bottom: 5px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
@media (max-width: 980px) {
    .anchor_menu .child-menu {
        width: 49%;
    }
    .anchor_menu .child-menu {
        width: 49%;
    }
}



.btn_link{
    width: 100%;
    margin: 2rem auto;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    background-image: -moz-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -ms-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	border-radius: 5rem;
	padding: .5rem;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.btn_link:hover{
	box-shadow: 0px 1px 3px rgba(0,0,0,.2);
}
.btn_link a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 2rem;
    text-decoration: none;
	-webkit-transition: all .3s;
	transition: all .3s;
	border-radius: 4rem;
	background: #fff;
}
.btn_link a:hover{
	opacity: 1;
	background: transparent;
	color: #fff;
}
.btn_link a::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #54b957;
    border-right: 3px solid #54b957;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 2rem;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn_link a:hover::after {
    border-color: #fff;
}
.btn-border{
	display: inline-block;
	font-size: 1.4rem;
	box-shadow: 0px 0px 1px 0px #777;
	background-image: -moz-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -ms-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	padding: 0;
	border: 0;
	outline: 0;
}
a.btn-border span, .btn-border span{
	padding: 2rem 3rem;
	display: block;
	color: #777;
	background: #fff;
	transition: .3s all;
}
.btn-border:hover{
	box-shadow: 0px 0px 5px 0px #777;
}
a.btn-border:hover span, .btn-border:hover span{
	background: transparent;
	color: #fff;
}

a.btn-round{
	box-shadow: 0px 0px 15px -5px #ccc;
	border: 3px solid #fff;
	background: #fff;
	padding: .5rem;
	width: 100%;
	max-width: 40rem;
	border-radius: 5rem;
	font-size: 2rem;
	position: relative;
	display: block;
	margin: 0 auto;
}
a.btn-round::before{
	content: "";
	width: calc(100% - .4rem);
	height: calc(100% - .4rem);
	display: block;
	position: absolute;
	top: .2rem;
	left: .2rem;
	border-radius: 5rem;
	background-image: -moz-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	background-image: -ms-linear-gradient( -180deg, rgb(84,185,87) 0%, rgb(80,165,201) 100%);
	z-index: 1;
}
a.btn-round::after{
	content: "";
	display: inline-block;
    width: 1.5rem; /* 大きさ */
    height: 1.5rem; /* 大きさ */
    border-top: 2px solid #52ae93; /* 線の太さ・色 */
    border-left: 2px solid #52ae93; /* 線の太さ・色 */
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
	position: absolute;
	right: 4rem;
	top: 50%;
	margin-top: -1rem;
	z-index: 2;
	transition: .5s all;
}
a.btn-round span{
	background: #fff;
	display: flex;
	padding: 2rem;
	height: 100%;
	border-radius: 5rem;
	position: relative;
	z-index: 2;
	justify-content: center;
	color: #52ae93;
	transition: .5s all;
}
a.btn-round:hover span{
	background: transparent;
	color: #fff;
}
a.btn-round:hover::after{
	border-color: #fff;
}

a.btn-white{
	width: 100%;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #575757;
	color: #575757;
}
a.btn-white:hover{
	color: #52ae93;
	border-color: #52ae93;
}

.btn-blue{
	padding: .5rem 2rem;
	border-radius: 1rem;
	background: #bbd2dc;
	color: #fff;
	display: inline-block;
}
.btn-gray{
	padding: .5rem 2rem;
	border-radius: 1rem;
	background: #c5c5c5;
	color: #fff;
	display: inline-block;
}

.lv-lightblue{
	padding: 2rem 2rem 2rem 4rem;
	border-radius: 1rem;
	background: #e1ebef;
	color: #000;
	position: relative;
	display: block;
	font-size: 2rem;
	font-weight: 700;
}
.lv-lightblue span::before{
	content: "";
	display: block;
	height: 4rem;
	background: #91a3ad;
	border-radius: 1rem;
	width: .8rem;
	position: absolute;
	left: 2rem;
	top: 50%;
	margin-top: -2rem;
}


.table-1{
	border: 0;
	width: 100%;
	border-bottom: 1px solid #ccc;
}
.table-1 tr, .table-1 td, .table-1 th{
	border: 0;
}
.table-1 td, .table-1 th{
	border-top: 1px solid #ccc;
	padding: 1rem;
}

.table-2{
	border: 0;
	width: 100%;
}
.table-2 tr, .table-2 td, .table-2 th{
	border: 1px solid #ccc;
	margin: -1px 0 0 -1px;
}
.table-2 td, .table-2 th{
	padding: 1rem;
}
.table-2 th{
	background: #58B4CB;
	color: #fff;
}


.dl-head{
	display: flex;
	flex-wrap: wrap;
}
.dl-title{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;
	background: #58B4CB;
	color: #fff;
	border-right: 1px solid #ffffff;
}
.dl-core{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;
	background: #58B4CB;
	color: #fff;
	border-right: 1px solid #ffffff;
}
.dl-detail{
	display: flex;
	flex-wrap: wrap;
}
.dl-detail dt{
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;
	background: #58B4CB;
	color: #fff;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
.dl-detail dd{
	width: 70%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 1rem 2rem;
	color: #000000;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	background-color: #efefef;
}
.border-L{
border-left: .5px solid #9f9f9f !important;
}
.border-R{
	border-right: .5px solid #9f9f9f !important;
}
.border-T{
	border-top: 1px solid #9f9f9f;
}
.border-B{
	border-bottom: 1px solid #9f9f9f;
}

.bg-f7f7f7 {
    background-color:  #f7f7f7 !important;
}
.bg-ffffff {
    background-color:  #ffffff !important;
}
.one-block{
    padding: 0rem 2rem;
    align-items: center;
    display: flex;
    justify-content: center;
	width: calc(100% - calc(100%/3)) !important;
}
.two-block {
    padding: 0rem 2rem;
    align-items: center;
    display: flex;
    justify-content: center;
	width: calc(100% - calc(100%/3) - calc(100%/3)) !important;
}
.h3-green{
	border-left: 1rem solid rgb(84,185,87)!important;
}
.youtube{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
}
.youtube iframe, .youtube .noimg{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
.dl-detail dd.sub-block{
	display: block;
}
.dl-detail dd.sub-block sub{
	font-size: .7em;
	vertical-align: baseline;
}
.dl-2 .dl-core{
	width: calc(100%/3);
}
.dl-2 .dl-title{
	width: calc(100%/3);
}
.dl-2.dl-detail{
	width: calc(100%);
}
.dl-2 .dl-detail dt{
	width: calc(100%/3);
}
.dl-2 .dl-detail dd{
	width: calc(100% - calc(100%/3)) ;
	justify-content: center;
}

.accordion:not([open]) {
    margin-bottom: 7px;
}
.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-left: 5px solid #6dcfaf;
    background-color: #e6f3f1;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}
.accordion summary::-webkit-details-marker {
    display: none;
}
.accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #b6bdc3;
    border-right: 3px solid #b6bdc3;
    content: '';
    transition: transform .3s;
}
.accordion[open] summary::after {
    transform: rotate(225deg);
}
.accordion p {
    transform: translateY(-10px);
	font-size: 15px;
    line-height: 30px;
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}
.accordion[open] p {
    transform: none;
    opacity: 1;
}

/* 追加 */
.product-title{
	position: relative;
	font-size: 1.8rem;
	font-weight: bold;
	padding-left: 1.5rem;
}
.product-title::before{
	content: '';
    width: 10px;
    height: 10px;
    background-color: #58B4CB;
    position: absolute;
    left: 0;
    top: 9px;
}

.border-T{
	border-top: 1px solid #9f9f9f;
}

.table-3{
	border: 0;
	width: 100%;
	border-bottom: 1px solid #ccc;
}
.table-3 tr, .table-1 td, .table-1 th{
	border: 0;
}
.table-3 td, .table-1 th{
	border-top: 1px solid #ccc;
	padding: 1rem;
	vertical-align: middle;
}
.table-3 img{
	max-width: 200px;
}
.detail-table{
	width: 100%;
}

.detail-table tr th{
	width: 30%;
	background: #58B4CB;
	color: #fff;
	font-weight: normal;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	padding: 1rem 2rem;
	vertical-align: middle;
}
.detail-table tr td{
	width: 70%;
	color: #000000;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	padding: 1rem 2rem;
	vertical-align: middle;
	background-color: #efefef;
}
.detail-table.th-2 th{
	width: 20%;
}

/* バイオのテーブル */
.t-bio1 .detail-table th,.t-bio1 .detail-table td{
	font-size: 1.4rem;
	padding: 1rem;
	text-align: center;
	width: auto;
}
.detail-table.t-bio1 th,.detail-table.t-bio1 td{
	font-size: 1.4rem;
	padding: 1rem;
	text-align: center;
	width: auto;
}
.f-12{font-size: 1.2rem !important;}

/* .t-bio2 →pc表示でも横に長い */
.t-bio2 .detail-table th,.t-bio2 .detail-table td{
	font-size: 1.4rem;
	padding: 1rem;
	text-align: center;
	width: auto;
}

.detailTable-field-wrap.t-bio2{
	display: block;
	overflow-x: scroll;
}
.t-bio2 .detai-table{
	display: block;
	min-width: 800px;
}

.f-bold{
	font-weight: bold;
}
.column2-text{
	width: 60%;
	margin-top: 2rem;
}
.column2-img{
	width: 30%;
	margin-top: 2rem;
	text-align: center;
}

.column2-img img{
	max-height: 200px;
}

/* ミニテーブル */


@media only screen and (max-width: 750px) {
	.dl-field-wrap,.detailTable-field-wrap,.detail-table-field-wrap{
	display: block;
	overflow-x: scroll;
	}
	.dl-field,.detail-table{
	display: block;
	min-width: 700px;
	}
	.news{
		display: inline-table !important;
	}

}
@media only screen and (max-width: 600px) {
	p{
		font-size: 1.4rem !important;
	}
	h2{
		font-size: 2.4rem !important;
	}
	h3{
		font-size: 1.9rem !important;
	}
	#detail ul li{
		font-size: 1.4rem !important;
	}
	.product-title{ font-size: 1.6rem;}


	.column2-text{
		order: 2;
		width: 100% !important;
	}
	.column2-img{
		width: 100%;
		order: 1;
	}
	.column2-img img{
		max-height: 250px;
	}
	.t-mini .detail-table{
		width: 100%;
		min-width: 100%;
	}
}