/*------------------------------------
汎用
------------------------------------*/
html {max-width: 640px; min-width: 320px;}
body {max-width: 640px; min-width: 320px; min-height: 100%; overflow-y: hidden;}

/*sp限定*/
.pc {display: none!important;}

/*clearfix*/
.clearfix {}
.clearfix:after {content: ""; display: block; clear: both; visibility: hidden;}

/*コンティナ*/
.container {display: block; margin: 0 auto; padding: 0 12px;}

/*汎用flex*/
.flex-box {display: flex; flex-wrap: wrap;}

/*パンくずリスト*/
#breadcrumbs {margin: 0 auto; padding: 4px 12px; white-space: nowrap; overflow: scroll;}
#breadcrumbs ul {display: flex; align-items: center; margin: 0 auto; white-space: nowrap; overflow: scroll;}
#breadcrumbs ul li {display: inline-block; font-size: .85em; line-height: 1; padding: 10px 0.5rem;}
#breadcrumbs ul li:first-child {padding-left: 0;}
#breadcrumbs ul li a {display: inline-block; color: #333; vertical-align: middle;}
#breadcrumbs ul li a i {display: inline-block;}
#breadcrumbs ul li a i.fa-home {color: #2bb9ac; font-size: 1.5em;}

/*ページネーション*/
.pagination {display: flex; justify-content: center; line-height: 2; text-align: center; margin: 50px auto;}
.pagination span, .pagination a {line-height: 1; padding: 16px 14px; width: auto; background: #fff;}
.pagination a {display: inline-block; color: #2bb9ac;}
.pagination a:hover {color: #fff; background: #2bb9ac; opacity: 1;}
.pagination .current {background: #2bb9ac; color: #fff; opacity: 1;}

/*上のアレ*/
.page-visual {text-align: center; background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%); margin: 0 0 20px!important; padding: 65px 0;}
.page-visual span {display: block; color: #fff; line-height: 1.5;}
.page-visual span.en {font-family: 'Lato', sans-serif; font-size: 32px;}
.page-visual span.jp {font-size: 14px;}

/*グラデ見出し*/
.gradation {text-align: center;}
.gradation span {
	display: inline-block;
	font-size: 1.75em;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	color: #7864cf;
	background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast:none){.gradation span {background: none;}}

/*ボーダー（円付き）*/
.border-c {padding: 0 0 10px;}
.border-c span {display: block;}
.border-c .text {margin: 0 6px 6px;}
.border-c .btm {position: relative; width: 100%; height: 1px; background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);}
.border-c .btm:before {bottom: -3px; left: -3px; width: 7px; height: 7px; background: #7864cf;}
.border-c .btm:after {bottom: -6px; left: -6px; width: 11px; height: 11px; border: 1px solid #7864cf;}
.border-c .btm:before,.border-c .btm:after {content: ""; display: block; position: absolute; border-radius: 50%;}
.border-c.white .btm {background: #fff;}
.border-c.white .btm:before {background: #fff;}
.border-c.white .btm:after {border: 1px solid #fff;}

/*もっと見る*/
.more {
	display: block;
	width: 80vw;
	color: #fff;
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	background: #7864cf;
	background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);
	margin: 0 auto 20px;
	padding: 15px 0;
	border-radius: 48px;
}

/*白背景*/
.back-white {width: calc(94vw - 40px); background: #fff; margin: 0 auto; padding: 20px; border-radius: 20px; box-shadow: 0 0 24px 8px rgba(0,0,0, .1);}
/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {width: 100%; position: fixed; top:0; left:0; background: transparent; z-index: 100; transition: .3s all ease;}
header .container {height: 60px; align-items: center;}
header .logo {margin-right: auto;}

header.conversion {background: #fff;}

/* ハンバーガー */
header #nav-toggle {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	z-index: 201;
}
header #nav-toggle span {
	position: relative;
	display: block;
	width: 32px;
	height: 1px;
	margin: 0 auto;
	background: linear-gradient(to right, rgba(120,100,207, .8) 0%, rgba(52,131,215, .8) 53%, rgba(43,185,172, .8) 100%);
	transition: all .4s;
}
header #nav-toggle span:nth-child(1) {top: 13px;}
header #nav-toggle span:nth-child(2) {top: 19px; opacity: 1; transition: all .3s;}
header #nav-toggle span:nth-child(3) {top: 25px;}
header #nav-toggle:hover {cursor: pointer;}
.open header #nav-toggle span {background: #fff!important;}
.open header #nav-toggle span:nth-child(1) {transform: rotate(45deg); top: 19px;}
.open header #nav-toggle span:nth-child(2) {opacity: 0;}
.open header #nav-toggle span:nth-child(3) {transform: rotate(-45deg); top: 17px;}
.open header #nav-toggle p {opacity: 0;}

header .navi {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	background: linear-gradient(to right, rgba(120,100,207, .8) 0%, rgba(52,131,215, .8) 53%, rgba(43,185,172, .8) 100%);
	visibility: hidden;
	opacity: 0;
	transform: scale(1.2);
	transition: all .5s ease;
}
.open header .navi {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
	transition: all .5s ease;
}
header .navi nav {flex-direction: column; justify-content: center; align-items: center;}
header .navi nav li {display: block; line-height: 1; padding: 20px 0;}
header .navi nav li a {font-size: 1.25em; letter-spacing: 4px; color: #fff;}
header .navi .sns {margin-top: 30px; flex-wrap: nowrap;}
header .navi .sns li {display: block; margin: 0 10px;}
header .navi .sns li a img {width: 42px; height: 42px; border-radius: 50%; position: static;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
トップページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
#front {}

#front .top {position: relative; width: 100%; height: 100vh;}
#front .top .cont {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center;}
#front .top .cont h1 {color: #fff; font-size: 2em; font-weight: 700; line-height: 1.5; letter-spacing: 4px; margin-bottom: 20px;}
#front .top .cont p {font-family: 'Lato', sans-serif; color: #d4d4d4; font-size: 1.25em; line-height: 1.25; letter-spacing: 2px;}
#front .top .link {position: absolute; bottom: 30px; left: 50%; transform: translate(-50%,0); z-index: 1; text-align: center;}
#front .top .link span {display: block; color: #26d3ba; font-size: 1.3em; font-weight: 700; margin-bottom: 10px;}
#front .top .link i {color: #26d3ba; font-size: 2.1em;}

#front .sec01 {width: 100%; position: relative; padding-top: 50px;}
#front .sec01 .cont {}
#front .sec01 .cont a {display: block; position: relative; width: calc(100%); height: 56px; margin: 0 auto 40px;}
#front .sec01 .cont a span {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
	display: block;
	width: 90%;
	height: 16px;
	padding: 20px 0;
	line-height: 1;
}
#front .sec01 .cont a span.shadow {
	background: transparent;
	box-shadow: -7px 7px 7px rgba(0,0,0, .5);
	transform: skew(30deg) translate(-50%,0);
	z-index: 1;
}
#front .sec01 .cont a span.back {
	background: #7864cf;
	background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);
	transform: skew(30deg) translate(-50%,0);
	transition: all .2s ease;
	z-index: 2;
}
#front .sec01 .cont a span.text {
	color: #fff;
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
	margin: 0;
	background: transparent;
	transition: all .2s ease;
	z-index: 3;
}
#front .sec01 .cont a:active span.back,#front .sec01 .cont a:active span.text {top: 3px;}
#front .sec01 .information {position: relative; margin: 0 auto -170px; z-index: 1;}
#front .sec01 .information .market_price {justify-content: space-between; margin-bottom: 40px;}
#front .sec01 .information .market_price h2 {width: 100%; color: #666; font-size: 1.15em; font-weight: 700; text-align: center; padding: .5em 0 .75em;}
#front .sec01 .information .market_price h2 i {font-size: 1em; margin-right: 6px;}
#front .sec01 .information .market_price li {
	position: relative;
	width: 100%;
	background: #fff;
	margin-bottom: 10px; 
	padding: 8px 10px;
	border: 8px solid #dbdcdc;
	overflow: hidden;
	box-shadow: 3px 3px 3px 2px rgba(0,0,0, .1);
}
#front .sec01 .information .market_price li .text {position: relative; flex-wrap: nowrap; align-items: right; z-index: 1;}
#front .sec01 .information .market_price li .text h3 {text-align: right; font-size: 1.25em; font-weight: 700; line-height: 1.5;}
#front .sec01 .information .market_price li .text p {position: relative; text-align: right; font-size: 1.5em; font-weight: 700; line-height: 1.25; margin: 24px 0 5px;}
#front .sec01 .information .market_price li .text p:after {content: ""; position: absolute; bottom: -5px; display: block; width: 100%; height: 2px; background:#333;}
#front .sec01 .information .market_price li img {position: absolute; top: -10px; left: -18px; width: 96px; height: 96px; z-index: 0; opacity: .6;}
#front .sec01 .information .news_list {border: 4px solid #006fff; background: #fff;}
#front .sec01 .information .news_list h2 {
	position: relative;
	display: inline-block;
	font-size: 1.1em;
	color: #fff;
	font-weight: 700;
	background: #006fff;
	padding: 2px 20px 4px 20px;
}
#front .sec01 .information .news_list h2:after {
	content: "";
	position: absolute;
	display: inline-block;
	top: 0;
	right: -25px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 0 35px 25px;
	border-color: transparent transparent transparent #006fff;
}
#front .sec01 .information .news_list ul {padding: 16px;}
#front .sec01 .information .news_list ul li {margin-bottom: 16px;}
#front .sec01 .information .news_list ul li:last-child {margin-bottom: 0;}
#front .sec01 .information .news_list ul li a {display: block;}
#front .sec01 .information .news_list ul li a .img {height: 180px;}
#front .sec01 .information .news_list ul li a .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
	font-family: 'object-fit: cover; object-position: 50%;';
}
#front .sec01 .information .news_list ul li a .text {margin-top: 16px;}
#front .sec01 .information .news_list ul li a .cat {display: inline-block; background: #888; color: #fff; font-size: .9em; padding: 1px 10px; border-radius: 4px;}
#front .sec01 .information .news_list ul li a .cat.oshirase {background: #ff931e;}
#front .sec01 .information .news_list ul li a .cat.news {background: #3fa9f5;}
#front .sec01 .information .news_list ul li a .date {margin-left: .5em; font-size: 1em;}
#front .sec01 .information .news_list ul li a h3 {font-size: 1.1em; font-weight: 700; margin: 10px 0;}
#front .sec01 .information .news_list ul li a p {font-size: .9em;}
#front .sec01 .information .news_list ul li a p i {color: #006fff; margin-left: .35em;}
#front .sec01 .information .news_list .link {display: block; width: calc(100% - 32px); color: #fff; text-align: center; background: #006fff; margin: 0 auto 16px; padding: 12px 0;}
#front .sec01 .information .news_list .link i {color: #ffffa1; margin-left: .35em;}

#front .sec02 {}
#front .sec02 .main {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 250px 0 100px;
	background-image: radial-gradient(circle at 50% 50%, #00ecfc 0%, #00aeea 25%, #00489f 50%, #000c5c 72.333%, #000b57 72.333%, #000345 100%);
	/*background-image: radial-gradient(circle at 50% 50%, #00a1fc 0%, #0077eb 25%, #00329f 50%, #000c5c 72.333%, #000b57 72.333%, #000345 100%);*/
	background-position: center center;
	background-repeat: no-repeat;
}
#front .sec02 .main .back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/sec02/sec02_map.png);
	background-position: center center;
	background-repeat: no-repeat;
	opacity: .4;
	z-index: 0;
}
#front .sec02 .main .cont {position: relative; z-index: 1;}
#front .sec02 .main .cont h2 {color: #fff; font-size: 2.1em; font-weight: 700; text-align: center; line-height: 1.5; filter: drop-shadow(0 0 4px rgba(0,0,0, .8));}
#front .sec02 .main .cont p {color: #fff; font-size: 1.1em; line-height: 2; margin-top: 40px; filter: drop-shadow(0 0 4px rgba(0,0,0, .8));}
#front .sec02 .img_list img {
	width: 50%;
	height: 40vw;
	max-height: 320px;
	object-fit: cover;
	object-position: 50%;
	font-family: 'object-fit: cover; object-position: 50%;';
}
#front .sec02 .characteristic {text-align: center; padding: 60px 12px;}
#front .sec02 .characteristic p {font-size: 1.1em; font-weight: 700; margin: 16px 0 50px;}
#front .sec02 .characteristic .rireki {
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);
	margin-bottom: 40px;
	padding: 20px;
	border-radius: 10px;
}
#front .sec02 .characteristic .rireki img {margin-bottom: 20px;}
#front .sec02 .characteristic .rireki img:last-child{margin: 0;}
#front .sec02 .characteristic .notes {
	width: 100%;
	height: 100%;
	color: #4d4d4d;
	font-size: 1.1em;
	font-weight: 400;
	padding: 1px;
	background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);
	margin: 0 auto;
}
#front .sec02 .characteristic .notes span {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	background: #fff;
	padding: 10px;
}

#front .sec03 {
	padding: 60px 0;
	background-image: url(../img/sec03/sec03_back.png), radial-gradient(ellipse at 54.8% 100%, #2ae2b0 0%, #00a69d 100%);
	background-position: center center;
	background-repeat: no-repeat;
}
#front .sec03 h2 {font-size: 1.75em; font-weight: 700; text-align: center; margin-bottom: 20px; filter: drop-shadow(0 0 4px rgba(16,16,16, .3));}
#front .sec03 p {font-size: 1em; font-weight: 700; line-height: 2.2; margin: 0 0 40px;}
#front .sec03 .currency_list {margin-bottom: 40px; text-align: center;}
#front .sec03 .currency_list .flex-box {flex-wrap: nowrap; justify-content: center; margin-bottom: 20px;}
#front .sec03 .currency_list .flex-box img {width: 80px; height: 80px; margin: 0 10px;}
#front .sec03 .currency_list span {font-size: 1em;}
#front .sec03 .point {margin-bottom: 40px; text-align: center;}
#front .sec03 .point h3 {display: inline-block; color: #22b573; font-size: 1.4em; text-align: center; margin: 0 auto 30px; padding: 5px 20px; border: 2px solid #22b573;}
#front .sec03 .point ul {display: inline-block; margin: 0 auto;}
#front .sec03 .point ul li {margin-bottom: 12px;}
#front .sec03 .point ul li span {display: block; font-size: 1.25em;}
#front .sec03 .point ul li span.green {color: #22b573;}

#front .sec04, #front .sec05 {padding: 0 0 60px;}
#front .sec04 .head_img, #front .sec05 .head_img {
	width: 100%;
	height: 100%;
	max-height: 500px;
	object-fit: cover;
	object-position: 50%;
	font-family: 'object-fit: cover; object-position: 50%;';
}
#front .sec04 h2, #front .sec05 h2 {color: #666; font-size: 1.9em; font-weight: 700; text-align: center; line-height: 1.5; margin: 50px auto 40px;}
#front .sec04 p, #front .sec05 p {font-size: 1em; font-weight: 700; line-height: 2.2; margin: 0 0 30px;}
#front .sec04 .gradation, #front .sec05 .gradation {font-size: .85em; text-align: left; margin-bottom: 10px;}

#front .sec04 .graph_space01 {margin: 40px auto;}
#front .sec04 .graph_space01 h4 {margin-bottom: 20px;}
#front .sec04 .graph_space01 h4 span {display: block;}
#front .sec04 .graph_space01 h4 span.big {position: relative; color: #666; font-size: 1.25em; font-weight: 700;}
#front .sec04 .graph_space01 h4 span.big:before {content: ""; display: block; position: absolute; bottom: -8px; left: 0; width: 32px; height: 3px; background: #3fa9f5;}
#front .sec04 .graph_space01 h4 span.small {margin-top: 16px; font-size: .85em;}
#front .sec04 .graph_space01 .graph_canvas {display: flex; flex-direction: row-reverse; height: 400px;}
#front .sec04 .graph_space01 .graph_canvas .main {display: flex; flex-direction: column-reverse; width: 90%;}
#front .sec04 .graph_space01 .graph_canvas .main .legend {display: flex; justify-content: space-around; width: 100%; height: 120px;}
#front .sec04 .graph_space01 .graph_canvas .main .legend li {font-size: 1.25em; line-height: 50px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; width: 50px;}
#front .sec04 .graph_space01 .graph_canvas .main .legend li.mining {color: #f00; font-weight: 700;}
#front .sec04 .graph_space01 .graph_canvas .main .bar {display: flex; justify-content: space-around; width: 100%; height: calc(280px - 2em); border-bottom: 1px solid #333; border-left: 1px solid #333; margin: auto 0;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li {display: flex; flex-direction: column; justify-content: flex-end; position: relative; width: 50px;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li span {position: absolute; bottom: 0; left: 0; display: inline-flex; align-items: center; color: #fff; line-height: 1; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; width: 50px; margin: 0;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li.estate span {bottom: 12.5%;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li.solar span {bottom: 7.5%;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li.mining span {bottom: 14.5%; color: #333; font-weight: 700;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li span strong {font-size: 2em; color: #fff; line-height: 1; margin: 4px 0;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li.mining span strong {color: #f00; font-weight: 700;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li div {width: 50px; height: 100%; background: #888;}
#front .sec04 .graph_space01 .graph_canvas .main .bar li.estate div {height: 100%; background: linear-gradient(to top, #3fa9f5 75%,#6cbdf7 75%,#6cbdf7 100%);}
#front .sec04 .graph_space01 .graph_canvas .main .bar li.solar div {height: 60%; background: linear-gradient(to top, #fbb03b 75%,#fcc671 75%,#fcc671 100%);}
#front .sec04 .graph_space01 .graph_canvas .main .bar li.mining div {height: 10%; background: #f00;}
#front .sec04 .graph_space01 .graph_canvas .mass {display: flex;  flex-direction: column-reverse; width: 10%;}
#front .sec04 .graph_space01 .graph_canvas .mass span {height: 120px; font-size: .9em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin: 10px auto 0;}
#front .sec04 .graph_space01 .graph_canvas .mass ul {display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center; height: 270px;}
#front .sec04 .graph_space01 .graph_canvas .mass ul li {font-size: .9em;}

#front .sec04 .graph_space02 {width: 100%; margin: 40px auto;}
#front .sec04 .graph_space02 .top {display: block; width: 100%; height: auto; margin: 0;}
#front .sec04 .graph_space02 .top > div {display: flex; width: 100%; margin: 20px 0;}
#front .sec04 .graph_space02 .top ul {display: flex; flex-direction: column; justify-content: center; width: 100%;}
#front .sec04 .graph_space02 .top ul li {display: flex; flex-direction: column-reverse; margin: 16px 0;}
#front .sec04 .graph_space02 .top h4 {font-size: 1.2em; color: #fff; text-align: center; background: #888; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin: 0; padding: 12px 4px;}
#front .sec04 .graph_space02 .top p {margin: 0;}
#front .sec04 .graph_space02 .top p.notes {font-size: .85em; font-weight: 400; text-align: center; line-height: 1.5; margin-top: 10px;}
#front .sec04 .graph_space02 .top .graph_canvas {display: flex; justify-content: center; align-items: center; width: 100%; height: 100px; margin: 0; background: #888;}
#front .sec04 .graph_space02 .top .graph_canvas p {font-size: 1.2em; line-height: 1;}
#front .sec04 .graph_space02 .top .graph_canvas p span {display: block; font-size: 1.4em; font-weight: 700; line-height: 1; text-align: center; margin-top: 8px;}
#front .sec04 .graph_space02 .top .left h4 {background: #f8705f;}
#front .sec04 .graph_space02 .top .left .graph_canvas {background: #3c65ac;}
#front .sec04 .graph_space02 .top .left .graph_canvas p, #front .sec04 .graph_space02 .top .left .graph_canvas p span{color: #fff;}
#front .sec04 .graph_space02 .top .right h4 {background: #30b1c8;}
#front .sec04 .graph_space02 .top .right .graph_canvas {background: #fbd73d;}
#front .sec04 .graph_space02 .top .right ul li:nth-child(2n) {width: 70%;}

#front .sec04 .graph_space02 .bottom {position: relative; width: 100%; background: #39b54a; padding: 18px 0; text-align: center;}
#front .sec04 .graph_space02 .bottom h4 {font-size: 1.25em; color: #fff; line-height: 1.25; text-align: center; margin-bottom: 6px;}
#front .sec04 .graph_space02 .bottom span {font-size: .8em; color: #fff; line-height: 1.5;}

#front .sec05 {}
#front .sec05 .back-white p:last-child {margin-bottom: 0;}
#front .sec05 .hikaku {display: block; margin-bottom: 40px;}
#front .sec05 .hikaku li {}
#front .sec05 .hikaku li img {
	width: 100%;
	height: 50vw;
	object-fit: cover;
	object-position: 50%;
	font-family: 'object-fit: cover; object-position: 50%;';
}
#front .sec05 .hikaku h4 {margin: 16px;}
#front .sec05 .hikaku h4 span {display: block; font-size: 1.1em; text-align: center;}
#front .sec05 .hikaku h4 span.initial {color: #666;}
#front .sec05 .henkan {justify-content: space-between; align-items: center; flex-wrap: nowrap; width: 100%; margin: 40px auto;}
#front .sec05 .henkan div {max-width: 180px;}
#front .sec05 .henkan div:nth-child(2n) {width: 10vw; margin: 0 20px;}

#front .sec08 .cont .gradation {font-size: 1em;}
#front .sec08 .cont p {font-size: 1em; font-weight: 700; line-height: 2.2; text-align: center; margin: 30px auto 40px;}
#front .sec08 .contact {width: 100%; padding: 50px 0; background: url(../img/sec08/sec08_back.jpg) center/auto 100% no-repeat;}
#front .sec08 .contact ul li {display: block; background: #fff;  margin-bottom: 24px; padding: 12px; border-radius: 8px;}
#front .sec08 .contact ul li p {font-size: 1.05em; white-space: nowrap; margin-bottom: 8px;}
#front .sec08 .contact ul li p span {display: inline-block; font-size: .9em;  color: #f15a24; padding-left: 8px;}
#front .sec08 .contact ul li div {width: 100%;}
#front .sec08 .contact ul li div input,#front .sec08 .contact ul li div textarea {
	display: block;
	width: calc(100% - 1em);
	padding: .5em;
	border: none;
	background: #f8f8f8!important;
	box-shadow: none;
	border-radius: 5px;
}
#front .sec08 .contact ul li div textarea {resize: vertical; margin-top: .8em;}
#front .sec08 .contact input[type="submit"] {
	display: block;
	width: 80vw;
	color: #fff;
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	background: #7864cf;
	background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);
	margin: 40px auto 0;
	padding: 15px 0;
	border-radius: 48px;
	transition: all .3s ease;
}
#front .sec08 .contact input[type="submit"]:hover {opacity: .8;}
.wpcf7-response-output {border: 1px solid #fff!important; color: #fff!important; background: rgba(0,0,0, .3)!important;}
/*------------------------------------
フッター
------------------------------------*/
.googlemap {position: relative; width: 100%; height: 0; padding: 30px 0 76.25%; overflow: hidden;}
.googlemap iframe,.googlemap object,.googlemap embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

footer {background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);}
footer .cont {padding: 30px 0; text-align: center;}
footer .cont .access span {display: inline-block; color: #fff; font-size: .9em;}
footer .cont .access span.midashi {border: 1px solid #fff; margin: 0 1em 8px 0; padding: 2px 12px;}
footer .cont .logo {display: inline-block; width: 134px; margin: 40px 0 10px;}
footer .cont .company {display: block;}
footer .cont .company li {margin: 30px auto;}
footer .cont .company li h2 {width: 92%; margin: 0 auto;}
footer .cont .company li h2 span.text {font-family: sans-serif; color: #fff; font-size: 1.25em; line-height: 1.5;}
footer .cont .company li h2 span.btm {}
footer .cont .company li address {margin: 0 6px;}
footer .cont .company li address span {font-family: 'Lato', sans-serif; display: block; color: #fff; font-size: .85em; letter-spacing: 5px;}

footer .cont .info {display: block; margin-top: 40px;}
footer .cont .info li {font-family: 'Lato', sans-serif; color: #fff; font-size: 1.25em; line-height: 1.5; margin: 8px auto 0;}
footer .cont .info li a {color: #fff;}
footer .cont .info li i {color: #fff; font-size: 1em; vertical-align: middle; margin-right: 8px; line-height: 1.5;}
footer .cont .info li.tel {font-size: 1.8em; margin-bottom: 16px;}
footer .cont .info li.tel i {font-size: .65em; margin-top: -6px;}

footer .copyright {text-align: center; background: #333; padding: 10px 0;}
footer .copyright span {color: #fff; font-size: .85em;}


#scroll {display: block; position: fixed; bottom: 16px; right: 16px; z-index: 99; opacity: .8;}
#scroll a {display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: rgba(0,0,0, .3);}
#scroll a i {font-size: 1em; color: #fff;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
下層ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*------------------------------------
投稿ページ・固定ページ (single.php,page.php)
------------------------------------*/
#single .container {margin: 50px auto;}
#single .state {display: flex; margin-bottom: 30px;}
#single .state .cat {display: inline-block; background: #888; color: #fff; font-size: .9em; padding: 1px 10px 0; border-radius: 4px;}
#single .state .cat.oshirase {background: #ff931e;}
#single .state .cat.news {background: #3fa9f5;}
#single .state .date {margin-left: .75em; font-size: 1em;}
#single p {word-break: break-all; line-height: 2; margin: 20px 0;}
#single img {margin: 20px 20px 20px 0;}
#single h1 {font-size: 1.5em; font-weight: 700; line-height: 1.5; margin: 50px 0 24px;}
#single h1.post {margin: 50px 0 30px;}
#single h2 {
	position: relative;
	font-size: 1.4em;
	line-height: 1.5;
	margin: 50px 0 24px;
	padding: 0 2px 8px;
	border-bottom: 3px solid #ebecec;
}
#single h2:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100px;
	height: 3px;
	background: #2bb9ac;
}
#single h3 {
	font-size: 1.3em;
	line-height: 1.5;
	margin: 40px 0 20px;
	padding: 0 2px 8px;
	border-bottom: 2px solid #2bb9ac;
}
#single h4 {
	font-size: 1.2em;
	line-height: 1.5;
	margin: 30px 0 20px;
	padding-left: 10px;
	border-left: 5px solid #2bb9ac;
}
#single h5 {
	position: relative;
	font-size: 1.1em;
	line-height: 1.5;
	margin: 20px 0;
	padding-left: 1.2em;
}
#single h5:before {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	left: 0;
	width: .8em;
	height: .8em;
	background: #2bb9ac;
}
#single h6 {
	font-size: 1.05em;
	font-weight: 700;
	margin: 20px 0;
}

#single a * {color: #3483d7;}
#single a:after {font-family: "Font Awesome 5 Free"; content: "\f35d"; font-weight: 900; margin-left: 8px; color: #3483d7;}
#single em {font-style: italic;}
#single strong {font-weight: 800;}
#single blockquote {position: relative; margin: 20px 0; padding: 20px; background: #f3f3f3;}
#single blockquote:before,
#single blockquote:after {position: absolute; display: block; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #c8c8c8;}
#single blockquote:before {top: 15px; left: 15px; content: "\f10e";}
#single blockquote:after {bottom: 15px; right: 15px; content: "\f10d";}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 20px 0;}
#single code {display: block; color: #fff; margin: 20px 0; padding: 20px; background: #364549;}
#single ul, #single ol {margin: 20px 0;}
#single ul li, #single ol li {margin-left: 1.5em; line-height: 2.5;}
#single ul > li {list-style-type: disc;}
#single ol > li {list-style-type: decimal;}
#single li > ul, #single li > ol {margin-bottom: 0;}

#single .scroll-table {overflow: auto; white-space: nowrap; margin: 20px 0;}
#single table {width: 100%;border-collapse: collapse; text-align: left; line-height: 1.5; border: 1px solid #c8c8c8;}
#single table thead th, #single table thead td,
#single table tfoot th, #single table tfoot td {background: #e0e0e0; font-weight: 700;}
#single table thead th, #single table thead td {padding: 0.75rem 0.5rem;}
#single table th, #single table td {padding: 0.5rem; border: 1px solid #c8c8c8;}
#single table th {background: #f2f2f2;}

#single .aligncenter {display: block; margin: 0 auto;}
#single .alignright {float: right;}
#single .alignleft {float: left;}
/*------------------------------------
アーカイブページ (archive.php)
------------------------------------*/
#archive .container {margin: 20px auto;}
#archive .entry {width: 100%; margin: 0 0 4% 0;}
#archive .entry:last-child {margin: 0;}
#archive .entry .img {width: 100%; height: 200px;}
#archive .entry .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
	font-family: 'object-fit: cover; object-position: 50%;';	
}
#archive .entry .state {display: flex; margin: 16px 0 0;}
#archive .entry .state .cat {display: inline-block; background: #888; color: #fff; font-size: .9em; padding: 1px 10px 0; border-radius: 4px;}
#archive .entry .state .cat.oshirase {background: #ff931e;}
#archive .entry .state .cat.news {background: #3fa9f5;}
#archive .entry .state .date {margin-left: .75em; font-size: 1em;}
#archive .entry .text h2 {font-size: 1.15em; font-weight: 700; line-height: 1.5; margin: 12px 0;}
#archive .entry .text p {font-size: .9em;}
#archive .entry .text p i {color: #006fff; font-size: .9em; margin-left: .35em;}
/*------------------------------------
404.php
------------------------------------*/
#notfound {position: relative; width: 100vw; height: 100vh; background: linear-gradient(to right, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);}
#notfound h1 {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#notfound h1 span{display: block; font-family: 'Lato', sans-serif; font-size: 1.3em; color: #fff; text-align: center; line-height: 1.5; white-space: nowrap;}
#notfound h1 span.big {font-size: 2.2em;}
#notfound .link {position: absolute; top: 70%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 1em; font-weight: 700; white-space: nowrap; padding: 10px 20px; border: 1px solid #fff;}
/*------------------------------------
ローディング
------------------------------------*/
#loader{
	position: fixed;
	background: #fff;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 9999;
	overflow: hidden;
}
.spinner {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 56px;
	height: 50px;
}
.spinner > div {
	display: inline-block;
	height: 100%;
	width: 6px;
	background: #7864cf;
	background: linear-gradient(to top, #7864cf 0%, #3483d7 53%, #2bb9ac 100%);
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {animation-delay: -1.1s;}
.spinner .rect3 {animation-delay: -1.0s;}
.spinner .rect4 {animation-delay: -0.9s;}
.spinner .rect5 {animation-delay: -0.8s;}
@keyframes sk-stretchdelay {0%, 40%, 100% {transform: scaleY(0.4);}  20% {transform: scaleY(1.0);}}