/******************************************************************
Theme Name: CUBE GAMMA THEME
Theme URI: http://cube096.com
Description: CUBEが自信をもってお届けするレスポンシブウェブデザインテーマ
Author: CUBE CO.,LTD.
Author URI: http://cube096.com
Version: beta
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support
*/
*, *::before, *::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
html, body {
	height: 100%;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
input, button, textarea, select {
	font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
#root, #__next {
	isolation: isolate;
}
ol, ul {
	list-style-type:none;
	margin:0;
}
legend, menu, ol, ul {
	padding:0
}
a {
	text-decoration:none;
	color: #111;
}
p {
	overflow-wrap: break-word;
	text-align: justify;
}
body {
	/*--- ▼ゴシック ---*/
	font-family:"Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	
	/*--- ▼明朝 ---*/
	/*font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝";*/
	
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	color: #333;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
}
body img {
	max-width:100%;
	height:auto;
}
h1,h2,h3,h4,h5,h6{
	/*--- ▼英字見出し、数字 ---*/
	/*font-family: 'Cinzel', serif;*/	
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-family: 'Lato', sans-serif;*/
	/*font-family: 'Gilda Display', serif;*/
	/*font-family: 'Cinzel', serif;*/
	/*font-family: "Roboto", sans-serif; */
	
	/*--- ▼日本語見出し ---*/
	/*font-family: 'Noto Sans JP', sans-serif;*/
  /*font-family: 'Noto Serif JP', serif;*/
	/*font-family: 'Zen Maru Gothic', sans-serif;*/
	/*font-family: 'Zen Old Mincho', serif;*/
	
	font-weight: 400;
	line-height: 1.3;
	font-style: normal;
}
table{
	border-collapse: collapse;
}
:root {
	--font-small: clamp(16px, 1.2vw, 18px);
	--fontsize-114: clamp(33px, 7.6vw, 114px);
	--fontsize-64: clamp(30px, 9.9vw, 64px);
	--fontsize-48: clamp(30px, 4vw, 48px);
	--fontsize-46: clamp(28px, 3.9vw, 46px);
	--fontsize-32: clamp(25px, 3vw, 32px);
	--fontsize-29: clamp(21px, 2.8vw, 29px);
	--fontsize-25: clamp(18px, 2.1vw, 25px);
	--fontsize-24: clamp(17px, 2vw, 24px);
	--fontsize-22: clamp(16px, 1.6vw, 22px);
	--fontsize-20: clamp(16px, 1.4vw, 20px);
	--fontsize-18: clamp(16px, 1.3vw, 18px);
	--color-main: #183E91;
	--color-main2: #011444;
	--color-accent: #e40028;
	--color-back: #fdfdfd;
}
/* recaptcha badge 2507recaptchaを導入していないので一旦非表示
----------------------------------------------------------- */
/* .grecaptcha-badge{
    z-index:10000;
	bottom: 75px !important;
} */
/* ページネーション
----------------------------------------------------------- */
/*アーカイブ用*/
.nav-links{
	display: -webkit-flex;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.nav-links .page-numbers{
	display: block;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background-color: #fff;
	transition: all ease 0.5s;
	border-radius: 3px;
	border: 1px solid #D5D5D5;
	margin: 0 5px;
}
.nav-links .page-numbers.current{
	background-color: var(--color-main);
	color: #fff;
}
.nav-links .page-numbers:hover {
	background-color: #a2b7e0ff;
}
.nav-below {
	display: -webkit-flex;
	display: flex;
	justify-content: center;
}
.next.page-numbers,.prev.page-numbers{
	padding: 0 5px;
}
/*シングル用*/
.single .nav-below {
	display: inherit;
	margin-top: 100px;
}
.single .nav-below:after {
	content: "";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.single .nav-below a {
	text-decoration: none;
	padding: 10px;
	font-size: 0.9em;
	line-height: 1.5;
	transition: all ease 0.5s;
	background-color: #EBEBEB;
}
.single .nav-below a:hover {
	background-color: #a2b7e0ff;
}
.single .nav-below .prev {
	padding-left: 70px;
	position: relative;
}
.single .nav-below .next {
	padding-right: 70px;
	position: relative;
}
.single .nav-below .prev::before,
.single .nav-below .next::before{
	content: "";
	width: 40px;
	height: 40px;
	background-color: var(--color-main);
	border-radius: 20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.single .nav-below .prev::before{
	left: 10px;
}
.single .nav-below .next::before{
	right: 10px;
}
.single .nav-below .prev::after,
.single .nav-below .next::after{
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
.single .nav-below .prev::after{
	left: 25px;
	border-right: 7px solid #fff;
	border-left: 0;
}
.single .nav-below .next::after{
	right: 25px;
	border-left: 7px solid #fff;
	border-right: 0;
}
.prev {
	width: 38%;
	float: left;
}
.next {
	width: 38%;
	float: right;
	text-align: right;
}
.prev_title,
.next_title {
	font-size: 12px;
}
.next p{
	text-align: right;
}
.next p,
.prev p{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
	margin-top: 5px;
}
.prev img {
	float: left;
	margin-right: 10px;
}
.next img {
	float: right;
	margin-left: 10px;
}
.prevAndNextLeft a:before {
	content: "\f053";
	margin-right: 5px;
	font-family: FontAwesome;
}
.prevAndNextRight a:after {
	content: "\f054";
	margin-left: 10px;
	font-family: FontAwesome;
}
.prevAndNextLeft {
	width: 50%;
	float: left;
}
.prevAndNextRight {
	width: 50%;
	float: left;
}
.prevAndNextLeft {
	text-align: left;
}
.prevAndNextRight {
	text-align: right;
}
/* 
 animation
----------------------------------------------------------- */  
.fadein {
	opacity:0.1;
	transition:all ease 1s;
	-webkit-transition:all ease 1s;
	-moz-transition:all ease 1s;
}
.on .fadein,
.on.fadein {
	opacity:1;
}
.totop{
	opacity:0.1;
	transform: translateY(30px);
	transition: all 1s;
}
.on .totop,
.on.totop{
	opacity: 1;
	transform: translateY(0);
}
.fadeinleft {
	opacity:0.1;
	-webkit-transform: translateX(-50px);
	transform: translateX(-50px);
	transition: all ease 1s;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
}
.on .fadeinleft,
.on.fadeinleft {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.fadeinright {
	opacity:0.1;
	-webkit-transform: translateX(50px);
	transform: translateX(50px);
	transition: all ease 1s;
	-webkit-transition: all ease 1s;
	-moz-transition: all ease 1s;
}
.on .fadeinright,
.on.fadeinright {
	opacity: 1;
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}
.js-box {
	opacity: 0;
	transition: all .5s ease-in;
}
.js-box.ready {
	opacity: 1;
}
.no2{
	transition-delay: .3s;
}
.no3{
	transition-delay: 0.6s;
}
.no4{
	transition-delay: 0.9s;
}
.no5{
	transition-delay: 1.2s;
}
/* 
 Head
----------------------------------------------------------- */  
.header {
	width:100%;
}
/* 
 gNavi
----------------------------------------------------------- */ 
.navwrap {
	position:fixed;
	top:0;
	left:0;
	z-index:998;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	transition:all ease 0.5s;
}
.navwrap p img,
.navwrap h1 img{
	height: clamp(40px, 4vw, 50px);
	width: auto;
}
.navwrap .line a {
	display: flex;
	column-gap: 10px;
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
	background-color: #06C755;
	color: #fff;
	&:hover {
		background-color:rgb(75, 211, 132);
	}
}
.navwrap .nav-header-pc {
	position: relative;
	top: 15px;
	right: 25px;
	display: flex;
	column-gap: 4px;
	padding: 10px 20px;
	border-radius: 9999px;
	background-color: var(--color-back);
	box-shadow: 0 0 4px 0 rgb(0, 0, 0, .1);
}
.navwrap .logowrap {
	position: absolute;
	display: block;
	padding: 20px 30px;
	border-radius: 0 0 20px 0;
	background-color: var(--color-back);
	&::after {
		content: "";
		position: absolute;
		top: 0;
		right: -15px;
		display: block;
		width: 15px;
		height: 86%;
		background-color: var(--color-back);
		clip-path: polygon(0% 0%, 100% 0%, 0 100%);
	}
}
.navwrap .nav-header-pc ul {
	display: flex;
	align-items: center;
	column-gap: 4px;
}
.navwrap .nav-header-pc .mainNav a {
	display: block;
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 600;
	transition: all .3s ease-in;
	&:hover {
		color: #fff;
		background-color: #183E91;
	}
}
.navwrap .nav-header-pc a {
	font-size: var(--font-small);
}
/* パンくずリスト 2507パンくずリストを使用していないため非表示
----------------------------------------------------------- */
/* .breadcrumb__list {
    display: flex;
	width: min(90%,1200px);
    margin-inline: auto;
    flex-wrap: wrap;
	font-size: 14px;
}
.breadcrumb__item:not(:last-child)::after {
    content: '/';
    margin: 0 0.3rem;
}
.breadcrumb__item a {
    color: #9D9D9D;
}
.breadcrumb__item:last-child a {
    color: #222;
} */
/* 
共通
----------------------------------------------------------- */ 
.pc {
	display:block;
}
br.pc{
	display: inherit;
}
.sp {
	display:none;
}
br.sp{
	display: none;
}
.pc1100{
	display: block;
}
br.pc1100{
	display: inherit;
}
.sp1100{
	display: none;
}
br.sp1100{
	display: none;
}
.pc640{
	display: block;
}
br.pc640{
	display: inherit;
}
.sp640{
	display: none;
}
br.sp640{
	display: none;
}
.inner{
	width: min(90%,1200px);
	padding: 130px 0;
	margin-inline:auto;
}
.flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex .img img{
	width: 100%;
	height: auto;
}
#main{
	overflow: hidden;
}
#container{
	position: relative;
}
.anchor{
	padding-top: clamp(80px, 7.8vw, 150px);
    margin-top: calc(clamp(80px, 7.8vw, 150px) * -1);
}
.tac{
	text-align: center;
}
.tal{
	text-align: left;
}
.tar{
	text-align: right;
}
.taj{
	text-align: justify;
}
.linkbox{
	position: relative;
	z-index: 5;
}
.linkbox.tac a{
	margin: 0 auto;
}
.linkbox.tar a{
	margin: 0 0 0 auto;
}
.no_link{
	pointer-events: none !important;
}
.pt0{
	padding-top: 0 !important;
}
.pb0{
	padding-bottom: 0 !important;
}
.txt_only{
	width: 100% !important;
}
.txt_link{
	text-decoration: underline;
	transition: all ease 0.5s;
}
.txt_link:hover{
	opacity: 0.7;
}
.img_hover {
	overflow: hidden;
}
.img_hover img{
	transition:all ease 0.5s;
}
.img_hover:hover img{
	transform:scale(1.2,1.2);
}
.ttl-main {
	background-clip: text;
	color: transparent;
	background-image: linear-gradient(90deg, #333333, #272c36 10%, #1241a8 52%, #800d80 63%, #c11130 77%, #333333);
	background-size: 200%;
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	font-size: var(--fontsize-114);
	animation: gradation 5s infinite linear;
}
.ttl-gradient-blue {
	background-image: linear-gradient(90deg, #333333, #1241a8 72%, #333333);
	background-clip: text;
	background-size: 200%;
	font-size: var(--fontsize-48);
	font-weight: 600;
	font-family: "Roboto", sans-serif;
	color: transparent;
	animation: gradation 5s infinite linear;
}
@keyframes gradation {
	0%{
		background-position: 0% 0%;
	}
	50%{
		background-position: 100% 0%;
	}
	100%{
		background-position: 0% 0%;
	}
}
.secTtl {
	position: relative;
	padding-left: 24px;
	margin-bottom: 6px;
	font-size: var(--fontsize-18);
	font-family: "Roboto", sans-serif;
	&::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		display: block;
		border: 4px solid#e78597;
		border-radius: 9999px;
		width: 17px;
		height: auto;
		aspect-ratio: 1 / 1;
		background-color: var(--color-accent);
	}
}
.ttl {
	font-size: var(--fontsize-32);
}
.link-standard {
	position: absolute;
	padding: 20px 0 20px 20px;
	border-radius: 10px;
	width: min(303px, 92%);
	background-color: var(--color-back);
	transition: all .3s ease;
	&:hover {
		background-color: var(--color-main);
		color: #fff;
	.link_arrow {
		transform: translateY(-50%) scale(1.2);
		background-color: #fff;
		&::before {
			color: var(--color-main);
			transform: translateY(-50%) translateX(200%);
		}
		&::after {
			transform: translateY(-50%);
			opacity: 1;
		}
	}
	}
}
.link-standard .link_arrow {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	z-index: 4;
	display: block;
	border-radius: 5px;
	width: 36px;
	height: 36px;
	background-color: var(--color-main);
	overflow: hidden;
	transition: all .5s ease;
	&::before {
		content: "\f061";
		position: absolute;
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
		z-index: 5;
		font-weight: 900;
		font-family: 'Font Awesome 6 Free';
		color: var(--color-back);
		transition: all .3s ease ;
	}
	&::after {
		content: "\f061";
		position: absolute;
		top: 50%;
		right: 12px;
		transform: translateY(-50%) translateX(-200%);
		z-index: 5;
		font-weight: 900;
		font-family: 'Font Awesome 6 Free';
		color: var(--color-main);
		transition: all .3s ease ;
		opacity: 0;
	}
}
.lineAnimeWrap {
	position: relative;
	top: 0;
	right: 0;
	width: 100%;
}
.lineAnimeWrap .line {
	position: absolute;
	z-index: -1;
	display: inline-block;
	border-radius: 9999px;
	width: 19px;
	transform: rotate(-45deg);
	overflow: hidden;
	&::before {
		content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 9999px;
    animation: line-extend 3s cubic-bezier(0.87, 0, 0.13, 1) infinite;
    transform: translateY(100%);
	}
}
.lineAnimeWrap .line._01 {
	top: -155px;
	right: 350px;
	z-index: -1;
	height: 224px;
	&::before {
		background-color: var(--color-main);
	}
}
.lineAnimeWrap .line._02 {
	top: -15px;
	right: 125px;
	height: 224px;
	filter: blur(10px);
	&::before {
		background-color: var(--color-accent);
		animation-delay: .5s;
		animation-duration: 4s;
	}
}
.lineAnimeWrap .line._03 {
	top: -100px;
	right: 125px;
	height: 114px;
	width: 11px;
	&::before {
		background-color: #5797C6;
		animation-delay: .2s;
	}
}

@keyframes line-extend {
0% {
    transform: translateY(100%);
}
50% {
    transform: translateY(0);
}
90% {
    transform: translateY(-100%);
}
100% {
    transform: translateY(-100%);
}
}
.scroll {
	position: absolute;
	bottom: -33px;
	right: 65px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 999px;
	height: 74px;
	width: 74px;
	background-color: var(--color-back);
	box-shadow: 0px 0px 15px -5px #000000;
}
.js-accordion > .content{
	position: relative;
}
.js-accordion > .content .ttl{
	position: relative;
}
.js-accordion > .content .btn{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
}
.js-accordion .box {
	display: none;
}
.top_back{
	position: fixed;
	right: 3%;
	bottom: 15px;
	display: grid;
	border-radius: 5px;
	height: 45px;
	width: 45px;
	background-color: var(--color-main);
	place-content: center;
	box-shadow: 0px 0px 15px -5px #000000;
	z-index: 10000;
	opacity: 0;
	transition:all ease 0.5s;
	    &::before {
        content: "\f061";
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%) rotate(-90deg);
        z-index: 5;
        font-weight: 900;
        font-family: 'Font Awesome 6 Free';
        color: var(--color-back);
    }
}
.top_back.view{
	opacity: 1;
}
	.follow-link {
		position: fixed;
		bottom: 2%;
		right: calc(55px + 2%);
		z-index: 99;
		display: none;
		justify-content: center;
		align-items: center;
	}
	.follow-link .link-line {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 12px;
		padding: 3px 12px;
		border-radius: 10px;
		font-size: var(--fontsize-25);
		color: #fff;
		background-color: #06C755;
		transition: all .3s ease;
		&:hover {
			transform: scale(1.1);
		}
	}
/* 
 TOP
----------------------------------------------------------- */ 
#main.top::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 100%;
	height: 100vh;
	background-image: url(./library/images/purchase_backimg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
/*page-top section-fv */
.top_fv{
	position: relative;
	z-index: 6;
	padding-top: 185px;
	width:100%;
	height:fit-content;
	background-color: var(--color-back);
}
.top_fv .inner {
	position: relative;
	padding: 0;
	width: min(90%, 1825px);
}
.top_fv .txtArea {
	display: flex;
	justify-content: space-between;
}
.top_fv .txtArea p {
	align-content: end;
}
.top_fv .txtArea hgroup p {
	font-size: var(--fontsize-29);
}
.top_fv .imgArea {
	position: relative;
	width: 100%;
	margin-top: 40px;
}
.top_fv .imgArea .img-main {
	border-radius: 50px;
}
.top_fv .imgArea .logoWrap {
	position: absolute;
	left: 5%;
	bottom: 120px;
}
.top_fv .imgArea .logoWrap .img-logo {
	width: 42%;
}
.top_fv .imgArea .logoWrap p {
	margin: 25px 0;
	color: #fff;
}
/*page-top  section-concept */
.top_concept {
	position: relative;
	z-index: 5;
	background-color: var(--color-back);
	&::before, &::after {
		content: "";
		position: absolute;
		top: 50%;
		z-index: -1;
		transform: translateY(-50%);
		display: block;
		background-image: url(./library/images/com_backimg_circle.svg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	&::before {
		left: 0;
		transform: translateY(-50%) scale(1, -1);
		width: min(960px, 50vw);
		height: 944px;
		background-position: right;
	}
	&::after {
		right: 0;
		width: min(238px, 50vw);
		height: 863px;
		background-position: left;
	}
}
.top_concept .inner {
	display: flex;
	justify-content: space-between;
}
.top_concept .imgArea {
	position: relative;
	width: min(505px, 48%);
}
.top_concept .imgWrap {
	border-radius: 20px;
	width: 100%;
	height: 725px;
	overflow: hidden;
}
.top_concept .imgWrap img {
	height: 100%;
	object-fit: cover;
	object-position: left;
	opacity: 0;
}
.top_concept .imgWrap img.fadeinleft.on {
		opacity: 1;
	}
.top_concept .imgArea .drawing {
	position: absolute;
	bottom: 0;
	right: -84px;
	display: block;
	width: min(418px, 93%);
	height: auto;
	aspect-ratio: 16 / 13;
	background-image: url(./library/images/concept_img_drawing.svg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.top_concept .txtArea {
	width: min(505px, 48%);
}
.top_concept hgroup {
	margin-bottom: 30px;
}
/*page-top  section-service */
.top_service {
	position: relative;
	padding-top: 130px;
	margin-top: -130px;
	width: 100%;
	height: fit-content;
	z-index: 20;
	background-color: var(--color-back);
}
.top_service .inner {
	display: flex;
	column-gap: 135px;
	padding: 95px 0 130px;
}
.top_service .txtArea {
	position: relative;
	z-index: 1;
	min-width: 280px;
	color: var(--color-back);
	&::before,&::after {
		content: "";
		position: absolute;
		top: -110px;
		right: -280px;
		border-radius: 0 20px 20px 0;
		width: calc(100vw - calc(50vw - 190px));
		height: 626px;
	}
	&::before {
		z-index: -3;
		background-image: url(./library/images/sercive_txtArea_backimg.jpg);
		background-size: cover;
		background-position: left;
		background-repeat: no-repeat;
	}
	&::after {
		z-index: -2;
		background-image: radial-gradient(farthest-side at 56% 50%,rgb(75, 87, 117) 10%, var(--color-main2) 86%);
		opacity: .8;
	}
}
.top_service .txtArea hgroup {
	margin-bottom: 30px;
}
.top_service .txtArea .secTtl {
	&::before {
		border: 4px solid rgb(162, 162, 162);
		background-color: #fff;
	}
}
.top_service .txtArea .arrow-box {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	column-gap: 20px;
	margin-top: 48px;
}
.top_service .txtArea .arrow-prev {
	position: relative;
	height: 48px;
	width: 48px;
	border: 2px solid #fff;
	border-radius: 9999px;
	background-color: #ffffff4f;
	transition: all .2s ease;
	&::before {
		content: "\f053";
		position: absolute;
		top: 50%;
		right: 17px;
		transform: translateY(-50%);
		z-index: 5;
		font-weight: 900;
		font-family: 'Font Awesome 6 Free';
		color: var(--color-back);
	}
	&:hover {
		transform: scale(1.1);
		background-color:rgba(255, 255, 255, 0.54);
	}
}
.top_service .txtArea .arrow-next {
	position: relative;
	height: 48px;
	width: 48px;
	border: 2px solid #fff;
	border-radius: 9999px;
	background-color: #ffffff4f;
	transition: all .2s ease;
	&::before {
		content: "\f054";
		position: absolute;
		top: 50%;
		right: 17px;
		transform: translateY(-50%);
		z-index: 5;
		font-weight: 900;
		font-family: 'Font Awesome 6 Free';
		color: var(--color-back);
	}
	&:hover {
		transform: scale(1.1);
		background-color:rgba(255, 255, 255, 0.54);
	}
}
.top_service .sliderArea {
	position: relative;
	z-index: 5;
  width: calc(100% + (100vw - 100%) / 2);
	&::after {
		content: "";
		position: absolute;
		top: -86px;
		left: 106px;
		z-index: -1;
		border-radius: 20px 0 0 20px ;
		width: calc(100vw - calc(50vw - 80px));
		height: 657px;
		background-color: #EBEBEB;
	}
}
.top_service .sliderArea li {
	display: flex;
	flex-direction: column;
	row-gap: 40px;
	padding:  clamp(20px,1vw,35px) clamp(25px,1.2vw,40px) clamp(35px,1.5vw,50px) clamp(26px,1.2vw,40px);
	border-radius: 5px;
	margin: 0 min(25px, 2vw);
	width: clamp(280px, 30vw, 368px);
	height: min(433px, 50vw);
	min-height: 405px;
	background-color: #fff;
}
.top_service .sliderArea .imgWrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 77px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 9999px;
	background-color: var(--color-main);
}
.top_service .sliderArea img {
	object-fit: cover;
}
.top_service .sliderArea h3 {
	position: relative;
	z-index: 0;
	font-size: 24px;
	font-weight: 600;
	&::before,&::after {
		content: "";
		position: absolute;
		bottom: -20px;
		left: 0;
		height: 1px;
	}
	&::before {
		width: 100%;
		background-color:#cacaca;
	}
	&::after {
		width: 30%;
		background-color: var(--color-main);
	}
}
/*page-top  section-purchase */
.top_purchase {
	padding-bottom: 350px;
		position: relative;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color:rgba(3, 45, 67, 0.32);
	}
}
.top_purchase .wrap {
	position: relative;
	z-index: 5;
	width: 100%;
	height: fit-content;
	border-radius: 0 0 30px 30px;
	background-color: var(--color-back);
}
.top_purchase .lineAnimeWrap.top {
	top: 172px;
	right: -425px;
}
.top_purchase .lineAnimeWrap.top .line._01 {
	width: 10px;
	&::before {
		background-color:rgba(228, 0, 42, 0.5);
	}
}
.top_purchase .lineAnimeWrap.top .line._02 {
	width: 9px;
	filter: blur(6px);
	&::before {
		background-color: var(--color-main);
	}
}
.top_purchase .lineAnimeWrap.top .line._03 {
	width: 16px;
}
.top_purchase .lineAnimeWrap.bottom {
	z-index: -1;
}
.top_purchase .lineAnimeWrap.bottom .line._01 {
	top: -290px;
	left: -190px;
	width: 10px;
	&::before {
		background-color: var(--color-main);
	}
}
.top_purchase .lineAnimeWrap.bottom .line._02 {
	top: -150px;
	left: 25px;
	width: 9px;
	filter: blur(6px);
	&::before {
		background-color: #5797C6;
	}
}
.top_purchase .lineAnimeWrap.bottom .line._03 {
	top: -235px;
	left: -15px;
	width: 16px;
	&::before {
		 background-color: var(--color-accent);
	}
}
.top_purchase .contentWrap {
	display: flex;
}
.top_purchase .txtArea {
	width: clamp(332px, 40vw, 412px);
}
.top_purchase hgroup {
	margin-bottom: 25px;
}
.top_purchase .link-standard {
	background-color: var(--color-main);
	color: #fff;
	&:hover {
		background-color: rgb(186, 199, 224);
		color: #183E91;
		.link_arrow {
			background-color: var(--color-main);
			&::before {
				color: #fff;
			}
		}
	}
}
.top_purchase .link-standard .link_arrow {
	background-color: #fff;
	&::before {
		color: var(--color-main);
	}
	&::after {
		color: #fff;
	}
}
.top_purchase .contentArea {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	row-gap: 60px;
	column-gap: 50px;
	flex: 1;
}
.top_purchase .contentArea .imgArea {
	border-radius: 10px;
	border-top: 27px solid #EBEBEB;
	border-bottom: 27px solid #EBEBEB;
	border-right: 35px solid #EBEBEB;
	border-left: 35px solid #EBEBEB;
	margin-bottom: 20px;
	background-color: #EBEBEB;
	height: auto;
	aspect-ratio: 1 / 1;
	transition: all .5s ease;
}
.top_purchase .contentArea .imgWrap {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow: hidden;
}
.top_purchase .contentArea .imgArea img {
	position: relative;
	z-index: 2;
	transform: scale(0.9);
	width:	100%;
	transition: all .4s ease
}
.top_purchase .contentArea .imgArea .arrow-upRight {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 5;
	border-radius: 5px 0 0 0;
	width: clamp(33px, 3.9vw, 44px);
	height: auto;
	aspect-ratio: 1 / 1;
	background-color: #EBEBEB;
	overflow: hidden;
	transition: all .5s ease ;
	&::before {
		content: "\f062";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 5;
		transform: translate(-50%, -50%)  rotate(45deg);
		font-weight: 900;
		font-family: 'Font Awesome 6 Free';
		color: var(--color-main2);
		transition: all .3s ease ;
	}
	&::after {
		content: "\f062";
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 5;
		transform: translate(-400%, 200%)  rotate(45deg);
		font-weight: 900;
		font-family: 'Font Awesome 6 Free';
		color: #fff;
		opacity: 0;
		transition: all .3s ease ;
	}
}
.top_purchase .contentArea a:hover {
	.imgArea {
		border-color: var(--color-main);
	}
	.imgArea .arrow-upRight {
		bottom: 1.3%;
		right: 1.3%;
		background-color: var(--color-main);
		color: #fff;
		transform: scale(1.2);
		&::before {
			color: #fff;
			transform: translate(200%, -200%)  rotate(45deg);
		}
		&::after {
			transform: translate(-50%, -50%)  rotate(45deg);
			opacity: 1;
		}
	}
	.imgArea img {
		transform: scale(1);
	}
}
.top_purchase_content_ttl {
	line-height: 1.8;
}
.top_purchase .js-box {
	transform: translateX(20px);
}
.top_purchase .js-box.ready {
	transform: translateX(0);
}
/*page-top  section-faq */
.top_faq {
	position: relative;
	z-index: 5;
	background-color: var(--color-back);
	&::before, &::after {
		content: "";
		position: absolute;
		z-index: -1;
		display: block;
		width: min(238px, 20vw);
		height: 865px;
		background-image: url(./library/images/com_backimg_circle.svg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	&::before {
		top: 195px;
		right: 0;
		background-position: left;
	}
	&::after {
		bottom: 195px;
		left: 0;
		background-position: right;
	}
}
.top_faq hgroup {
	margin-bottom: 30px;
}
.top_faq .categorize {
	display: flex;
	border-radius: 9999px;
	width: 100%;
	background-color: #EDEDED;
}
.top_faq .categorize li {
	border-radius: 9999px;
	width: calc(100% / 3);
	text-align: center;
	align-content: center;
	cursor: pointer;
	&:hover {
		background-color:rgb(226, 226, 226);
	}
}
.top_faq .categorize .choices {
	display: block;
	padding: 15px 0;
	border-radius: 9999px;
	width: 100%;
	height: 100%;
	align-content: center;
	transition: all .5s ease;
}
.top_faq .categorize .choices.active {
	background-color: var(--color-main);
	color: #fff;
}
.top_faq .contentsArea {
	margin-top: 65px;
	width: 100%;
}
.top_faq .contentsArea .content {
	position: relative;
	padding: 0 40px 30px;
	width: 100%;
	background-color: #F4F4F4;
	+ .content {
		margin-top: 25px;
	}
}
.top_faq .contentsArea .content dt {
	padding: 35px 22px 0 30px;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	text-indent: -1.8em;
	&::before,&::after {
		content: "";
		position: absolute;
		top: 50px;
		right: 40px;
		width: 24px;
		height: 3px;
		border-radius: 999px;
		background-color: var(--color-main2);
	}
	&::after {
		transform: rotate(-90deg);
		transition: all .3s ease;
	}
}
.top_faq .contentsArea .content.open dt::after {
	transform: rotate(0);
}
.top_faq .contentsArea .content dd {
	display: none;
	padding: 30px;
	margin-top: 35px;
	color: #707070;
	background-color: #fff;
	font-size: 16px;
}
/*page-top  section-flow */
.top_flow {
	position: relative;
	z-index: 5;
	background-color: #EBEBEB;
}
.top_flow .content {
	position: relative;
	margin-top: 30px;
	width: min(336px, calc(100% / 3.3));
	&:not(:last-child) {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			top: 24%;
			right: -4vw;
			display: block;
			width: 26px;
			height: 24px;
			background-image: url(./library/images/com_arrow-red.svg);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}
.top_flow .imgArea {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 35px;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	&::before,&::after {
		content: "";
		position: absolute;
		z-index: -1;
		display: block;
		border-radius: 9999px;
	}
	&::before {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		height: 80%;
		background-color: rgb(255, 255, 255);
	}
	&::after {
		width: 100%;
		height: 100%;
		transform: scale(0.8);
		background-color: rgb(255, 255, 255);
		animation: wave 3s infinite ;
	}
}
@keyframes wave {
	from {
		transform: scale(0.8);
		opacity: 1;
	}
	to {
		transform: scale(1);
		opacity: 0.2;
	}
}
.top_flow .imgArea img {
	width: 42%;
}
.top_flow .flow-ttl {
	display: flex;
	padding-bottom: 25px;
	border-bottom: 1px dotted #333;
	margin-bottom: 20px;
	font-size: var(--fontsize-24);
	font-weight: 600;
	color: var(--color-main2);
}
.top_flow .flow-ttl .flow-ttl-num {
	display: block;
	margin-right: min(25px, 8%);
	align-content: end;
	line-height: 1;
	font-size: clamp(22px, 2.8vw, 46px);
}
.top_flow .flow-ttl .flow-ttl-txt {
	display: block;
	align-content: end;
}
.top_flow .note {
	display: block;
	margin-top: 16px;
	color: rgb(51, 51, 51, .5);
}
.top_flow .purchaseArea {
	display: flex;
	justify-content: space-between;
}
/*page-top  section-info */
.top_info {
	position: relative;
	z-index: 5;
	background-color: var(--color-back);
	&::before,&::after {
		content: "THe Ball Game Loop THe Ball Game Loop";
		position: absolute;
		top: 50%;
		left: 0;
		z-index: -1;
		transform: translateY(-50%);
		white-space: nowrap;
		font-size: clamp(145px, 14vw, 231px);
		font-family: "Roboto", sans-serif;
		font-weight: 100;
		color: var(--color-main2);
		animation: flow 60s linear infinite;
		opacity: .5;
	}
	&::after {
		left: 4100px;
	}
}
@keyframes flow {
  0% { transform: translateX(0)  translateY(-50%); }
  100% { transform: translateX(-100%)  translateY(-50%); }
}
.top_info .blur {
	position: relative;
	z-index: 5;
	display: flex;
	column-gap: 50px;
	padding: 65px 45px 30px;
	border-radius: 20px;
	background-color:rgba(224, 224, 224, 0.3);
	backdrop-filter: blur(10px);
}
.top_info hgroup {
	margin-bottom: 30px;
}
.top_info .leftArea > p {
	margin-bottom: 50px;
}
.top_info .link-line-id {
	padding: 40px 25px 30px;
	border-radius: 20px;
	background-color: #EBEBEB;
}
.top_info .link-line-id h4 {
	margin-bottom: 25px;
	text-align: center;
	font-weight: 600;
	font-size: var(--fontsize-24);
	color: var(--color-main2);
}
.top_info .link-line-id p {
	padding: 24px 0;
	border-radius: 5px;
	text-align: center;
	font-size: var(--fontsize-24);
	font-weight: 500;
	background-color: #fff;
}
.top_info .qrArea {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 20px;
	padding: 25px;
	border-radius: 20px;
	margin-bottom: 16px;
	width: clamp(350px, 43vw, 527px);
	background-color: #EBEBEB;
}
.top_info .qrArea .imgArea {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: clamp(18px, 5vw, 25px);
	background-color: #fff;
}
.top_info .qrArea p {
	font-size: var(--fontsize-24);
	font-weight: 500;
	&:first-child {
		font-weight: 600;
		color: var(--color-main2);
	}
}
.top_info .qrArea h3 {
	font-weight: 600;
	font-size: var(--fontsize-46);
}
.top_info h3 .stress {
	color: var(--color-accent);
}
.top_info .imgArea {
	width: 230px;
	height: auto;
	aspect-ratio: 1 / 1;
}
/* 
 subpage共通
----------------------------------------------------------- */
.news_fv .inner {
	padding: 280px 0 0;
	position: relative;
	&::after {
		content: "Purchase & News";
		position: absolute;
		bottom: 0;
		left: -10px;
		z-index: -1;
		white-space: nowrap;
		line-height: 1;
		font-family: "Roboto", sans-serif;
		font-weight: 500;
		font-size: clamp(39px, 10vw, 202px);
		color: #DFE5F0;
	}
}
.sub .js-box {
	transform: translateX(30px);
}
.sub .js-box.ready {
	transform: translateX(0);
}
/* 
 news index-archives page（サイドバー無し）
----------------------------------------------------------- */

.g_list {
	position:relative;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	width:min(100%,1200px);
	padding:10px 15px 10px 112px;
	border-radius: 5px;
	margin:0 auto clamp(40px, 5vw, 65px);
	background: var(--color-main2);
	box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.g_list p{
	padding:10px 0;
	position:absolute;
	top:10px;
	left:15px;
	font-weight:bold;
	line-height: 1;
	color: #fff;
}
.g_list .box{
	padding:5px;	
}
.g_list .box a{
	color:#000;
	background: #FFF;
	padding: 3px 15px;
	border-radius: 9999px;
	font-size:0.9rem;
	transition:all ease 0.5s;
	-webkit-transition:all ease 0.5s;
	-moz-transition:all ease 0.5s;
}
.g_list .box a:hover{
	background: var(--color-main);
	color:#FFF;	
}
.bcontwrap ul{
	display: grid;
	row-gap: clamp(25px, 4.3vw, 60px);
	column-gap: clamp(27px, 3vw, 40px);
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: clamp(80px, 11vw, 130px);
}
.bcontwrap ul li{
	position: relative;
	transition: all ease 0.5s;
	background-color: var(--color-back);
	display: grid;
	row-gap: 20px;
}
.bcontwrap ul li > a{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.bcontwrap ul li .img {
	border: 1px solid rgb(24, 62, 145, .5);
	height: 278px;
	overflow: hidden;
}
.bcontwrap ul li .img img{
	aspect-ratio: 5/3;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition:all ease 0.5s;
}
.bcontwrap ul li:hover .img img{
	transform:scale(1.2,1.2);
}
.bcontwrap ul li .txt{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 10px;
}
.bcontwrap ul li .txt span:first-of-type{
	font-size: 14px;
	color: #999;
	line-height: 1.3;
}
.bcontwrap ul li .txt h3{
	font-size: 16px;
	font-weight: 400;
	transition: all ease 0.5s;
}
.bcontwrap ul li:hover .txt h3{
	color: var(--color-main);
}
.bcontwrap ul li .txt p:not(.more){
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #535353;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
}
.cat a{
	display: inline-block;
	padding:3px 15px;
	border-radius: 9999px;
	white-space: nowrap;
	font-weight: normal;
	font-size:14px;
	line-height: 1.3;
	color:#fff;
	background-color: var(--color-main);
	transition: all ease 0.5s;
}
/* news single page
----------------------------------------------------------- */
.stitle {
	margin-bottom: 15px;
	font-size: var(--fontsize-25);
	font-weight: 500;
	line-height: 1.3;
	color: #222;
}
.singlecont a {
	text-decoration: underline;
	color: inherit;
	font-weight: inherit;
}
.singlecont h1,
.singlecont h2,
.singlecont h3,
.singlecont h4,
.singlecont h5,
.singlecont h6{
	line-height: inherit;
	font-weight: bold;
}
.news_single_content .inner {
	padding: 190px 0 130px;
}
.news_single_content .singlewrap {
	margin: 0 auto;
	width: min(900px, 100%);
}
.news_single_content .cat {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.news_single_content .data {
	display: block;
	margin-bottom: 40px;
	color: rgb(51, 51, 51, .5);
}
.news_single_content .singlecont {
	font-family: 'Noto Sans JP', sans-serif;
}
/* 
 foot
----------------------------------------------------------- */
.footer {
	padding-top: 10px;
	padding-bottom: 27px;
	background-color: var(--color-back);
	color: #fff;
}
.footer-back {
	border-radius: 20px 20px;
	margin: 0 auto 20px;
	width: 95%;
	background-color: var(--color-main2);
}
.footer .inner {
	padding: 60px 0 30px;
}
.footer .footer-navArea {
	display: flex;
	justify-content: space-between;
	padding-bottom: 115px;
	border-bottom: 1px solid rgb(255, 255, 255, .3);
	margin-bottom: 30px;
}
.footer .info {
	width: 258px;
}
.footer .info .footer-logo{
	height: clamp(62px, 9vw, 80px);
	width: auto;
	margin-bottom: 20px;
}
.footer .info p{
	margin-bottom: 20px;
}
.footer .info a {
	position: relative;
	display: block;
	padding: 12px 43px;
	border-radius: 999px;
	text-align: right;
	line-height: 1;
	font-size: var(--fontsize-22);
	color: #fff;
	background-color:rgba(255, 255, 255, 0.3);
	transition: all .3s ease;
	&::before {
		content: "\f095";
		position: absolute;
		top: 50%;
		left: 25px;
		transform: translateY(-50%);
		z-index: 5;
		font-weight: 900;
		font-family: 'Font Awesome 6 Free';
		color: #fff;
	}
	&:hover {
		background-color:rgba(255, 255, 255, 0.1);
	}
}
.footer .sitemap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: clamp(20px, 2.5vw, 50px);
	width: 61%;
}
.footer .sitemap a {
	display: block;
	padding-bottom: 16px;
	border-bottom: 1px solid rgb(255, 255, 255, .5);
	width: 100%;
	font-size: var(--fontsize-18);
	color: rgb(255, 255, 255, .5);
	transition: all .3s ease;
	&:hover {
		border-bottom: 1px solid rgb(255, 255, 255, .3);
		color: rgb(255, 255, 255, .3);
		.en {
			color:rgb(186, 186, 186);
			&::before {
				opacity: .7;
			}
		}
	}
}
.footer .sitemap a .en {
position: relative;
	display: block;
	padding-left: 25px;
	color: #fff;
	&::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		display: block;
		border: 4px solid rgb(138, 138, 141);
		border-radius: 9999px;
		width: 17px;
		height: auto;
		aspect-ratio: 1 / 1;
		background-color: #FFF;
	}
}
.footer .footer-otherArea {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.footer .footer-otherArea ul {
	display: flex;
	column-gap: 50px;
}
.footer .footer-otherArea a {
	color: rgb(255, 255, 255, .5);
	&:hover {
		color: rgb(255, 255, 255, .3);
	}
}
.footer .footer-otherArea .cop {
	align-content: end;
	color: rgb(255, 255, 255, .5);
}
/* 
 smartphone menu btn
----------------------------------------------------------- */
.spnavbtn {
	position:fixed;
	top:4%;
	right:2%;
	z-index:999;
	text-align:center;
	padding:12px 10px 5px 11px;
	border-radius: 5px;
	cursor:pointer;
	display:none;
	background: var(--color-main);
}
.nav-trigger, .nav-trigger span {
	display: inline-block;
	transition: all ease 0.5s;
	box-sizing: border-box;
}
.nav-trigger {
	position: relative;
	width: 30px;
	height: 18px;
}
.nav-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #FFF;
	border-radius: 20px;
}
.nav-trigger span:nth-of-type(1) {
	top: 0;
}
.nav-trigger span:nth-of-type(2) {
	top: 8px;
}
.nav-trigger span:nth-of-type(3) {
	bottom: 0;
}
/* 
 smartphone menu btn click
----------------------------------------------------------- */
.spnavbtn .activete {
	font-size:0.9em;
	opacity:0;
}
.spnavbtn .activete:before {
	content:"";
}
.nav-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	transform: translateY(8px) rotate(-45deg);
}
.nav-trigger.active span:nth-of-type(2) {
	left: 60%;
	opacity: 0;
	-webkit-animation: active-menu-bar02 .8s forwards;
	animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
@keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
.nav-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
}
/* 
 smartphone menu btn click area
----------------------------------------------------------- */
.spnav {
	position:relative;
	z-index:999;
}
.sp_close{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 998;
	display: none;
}
.sp_close.open{
	display: inherit;
}
.spnav .trigger {
	width:300px;
	height:100%;
	transition:all ease 0.5s;
	position:fixed;
	top:0;
	left:-300px;
	color:rgba(255,255,255,0);
	overflow-y:scroll;
}
.spnav .open {
	width:300px;
	max-width:80%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	color:rgba(150,150,150,1);
	overflow-y:scroll;
	-webkit-backdrop-filter: saturate(140%) blur(20px) brightness(130%);
	backdrop-filter: saturate(140%) blur(20px) brightness(130%);
	background: rgba(255,255,255,0.7);
}
.spnav .trigger > p {
	width:100%;
	padding:15px;
	text-align:center;
}
.spnav .trigger > p img {
	height: 40px;
	width: auto;
	margin:0 auto;
}
.spnav .trigger > ul > li {
	border-bottom: 1px solid var(--color-main);
	text-align:center;
	color: #231815;
	font-size:0.9rem;
	transition:all ease 0.5s;
}
.spnav .trigger > ul > li.line {
	border-bottom: unset;
	
}
.spnav .trigger > ul > li.line a {
	background-color: #06C755;
	color: #fff;
	&:hover {
		background-color:rgb(75, 211, 132);
	}
}
.spnav .trigger > ul > li.line img {
	margin-right: 10px;
}
.spnav ul li a {
	display:flex;
	align-items: center;
	justify-content: center;
	text-decoration:none;
	padding:0 10px;
	height:48px;
	transition:all ease 0.5s;
	line-height: 1.2;
	&:hover {
		color: var(--color-main);
		background-color: rgb(186, 199, 224);
	}
}
.spnav ul li.open_btn p{
	cursor:pointer;
	padding: 12px 0;
	text-align: center;
	font-size: 0.9rem;
}
.spnav ul li.open_btn span{
	font-size: 0.7em;
	position: relative;
	top: -1px;
	padding: 1em 0 1em 1em;
	color: #FA9D2C;
}
.spnav ul li ul {
	display: none;
}
.spnav ul li ul li {
	border-top:1px solid rgba(250,157,44,0.2);
}
.spnav ul li ul li:last-child {
	border-bottom:none;
}
@media screen and (max-width: 1600px) {
	/* 
	 header
	----------------------------------------------------------- */
}
@media screen and (max-width: 1400px) {
	.top_back {
		right: 2%;
		bottom: 2%;
	}
	/* 
	 top
	----------------------------------------------------------- */
	.top_concept .imgArea .drawing {
		right: -22px;
	}
	.top_concept::after {
		opacity: .2;
	}
	.top_purchase .lineAnimeWrap.top {
		top: 86px;
		right: -60px;
	}
	.top_purchase .lineAnimeWrap.bottom .line._01 {
		left: 0;
	}
	.top_purchase .lineAnimeWrap.bottom .line._02 {
		left: 210px;
	}
	.top_purchase .lineAnimeWrap.bottom .line._03 {
		left: 175px;
	}
	/* 
	 sub
	----------------------------------------------------------- */
	.sub .fv::after {
		left: 6%;
	}
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1100px) {
	.pc1100{
		display: none;
	}
	br.pc1100{
		display: none;
	}
	.sp1100{
		display: block;
	}
	br.sp1100{
		display: inherit;
	}
	.follow-link {
		display: flex;
	}
	/*
	 header
	----------------------------------------------------------- */
	/*
	 gNav
	----------------------------------------------------------- */
	.navwrap {
		align-items: center;
		padding: 15px 5% 50px;
		height: 60px;
		background-color: var(--color-back);
		box-shadow: 0px 3px 5px 0px rgb(0, 0, 0, .1);
	}
	.navwrap .nav-header-pc {
		display: none;
	}
	.navwrap .logowrap {
		padding: 0;
		border-radius: unset;
		&::after {
			content: unset;
		}
	}
	/*
	 top
	----------------------------------------------------------- */
	.top_fv {
		padding-top: 130px;
	}
	.top_fv .txtArea {
		flex-direction: column;
	}
	.top_fv hgroup {
		margin-bottom: 8%;
	}
	.top_fv .imgArea {
		margin-top: 20px;
	}
	.top_service .inner {
	column-gap: 7%;
	}
  .top_info .blur {
		column-gap: 20px;
		padding: 65px 30px 30px;
	}
	.footer .sitemap {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: clamp(20px, 3vw, 50px);
	width: 60%;
}
	/*
	 subpage共通
	----------------------------------------------------------- */
	.sub .fv .inner  {
		padding: 120px 0 0;
		&::after {
			bottom: 0;
		}
	}
	/*
	 news
	----------------------------------------------------------- */
	.news_list > li dd h3{
		font-size:18px;
	}
	.news_list > li dd p{
		margin-bottom: 15px;
	}
	.news_list > li dd .info{
		padding-top: 15px;
	}

	/* 
	 smartphone menu btn
	----------------------------------------------------------- */
	.spnavbtn {
		top:10px;
		right:10px;
		padding:10px 10px 5px 11px;
		display:block;
	}
	.nav-trigger {
		width: 30px;
	}
	/* 
	 footer
	----------------------------------------------------------- */
	.footer .info p:not(:first-of-type){
		margin-top: 5px;
	}
	.footer .info p,
	.footer .sitemap a{
		font-size: 0.9rem;
	}
}
@media screen and (max-width:820px) {
	.pc {
		display:none;
	}
	br.pc{
		display: none;
	}
	.sp {
		display:block;
	}
	br.sp{
		display: inherit;
	}
	.flex-prev {
		display:none!important;
	}
	.flex-next {
		display:none!important;
	}
	body{
		font-size: 0.9rem;
	}
	.inner {
		padding: 90px 0 60px;
	}
	/*
	 top
	----------------------------------------------------------- */
	.top_fv .imgArea {
		border-radius: 20px;
		height: 497px;
		overflow: hidden;
	}
	 .top_fv .imgArea .img-main {
			border-radius: unset;
			height: 100%;
			object-fit: cover;
		}
	 .top_fv .imgArea .logoWrap {
			top: 30px;
			left: 20px;
		}
	 .top_fv .imgArea .logoWrap p {
			padding-right: 30px;
			margin-bottom: 0;
		}
	 .top_fv .imgArea .logoWrap a {
			bottom: -90px;
		}
		.top_service {
			padding-top: 55px;
			margin-top: -55px;
		}
		.top_service .inner {
			flex-direction: column;
			padding-bottom: 0;
		}
		.top_service .txtArea {
			height: 457px;
			&::before,&::after {
				top: -56px;
				right: 0;
				width: calc(100vw - calc(50vw - 370px));
				height: 457px;
			}
		}
		.top_service .txtArea p {
			width: 90%;
		}
		.top_service .sliderArea {
			top: -30px;
			&::after {
				top: -56px;
				left: 0;
				width: calc(100vw - calc(50vw - 370px));
				height: 522px;
			}
		}
		.top_service .sliderArea .service_slide {
			padding-left: 20px;
		}
		.top_service .sliderArea li {
			margin: 0 min(25px, 3.2vw);
		}
		.top_purchase .contentWrap {
			flex-direction: column;
			row-gap: 90px;
		}
		.top_purchase .txtArea {
			width: 100%;
		}
		.top_purchase .contentArea {
			row-gap: 50px;
			column-gap: 40px;
			width: 100%;
		}
		.top_purchase .contentArea .imgArea .arrow-upRight {
			width: 44px;
		}
		.top_flow .content {
			display: flex;
			column-gap: 40px;
			margin: unset;
			width: 100%;
			&:not(:last-child) {
				&::after {
					top: 104%;
					right: 0;
					left: 72%;
					transform: rotate(90deg);
				}
			}
		}
		.top_flow .imgArea {
			width: min(336px, calc(50% - 40px));
			margin: unset;
		}
		.top_flow .txtArea {
			flex: 1;
		}
		.top_flow .flow-ttl  {
			font-size: clamp(21px, 3.2vw, 24px);
		}
		.top_flow .flow-ttl .flow-ttl-num {
			font-size: 46px;
		}
		.top_flow .purchaseArea {
			flex-direction: column;
			row-gap: 80px;
		}
		.top_info .blur {
			flex-direction: column;
			row-gap: 40px;
			padding: 50px 20px 30px;
		}
		.top_info .link-line-id {
			padding: 30px 13px 25px;
			}
		.top_info .qrArea {
			padding: 25px 10px;
			margin: 0 auto 16px;
			width: 100%;
		}
		.top_info .rightArea > p {
			text-align: center;
		}
	/*
	 subpage共通
	----------------------------------------------------------- */
	/*
	 news index-archives page
	----------------------------------------------------------- */
	.news_fv .inner {
		padding-top: 200px;
	}
	.bcontwrap ul{
		grid-template-columns: repeat(2, 1fr);
	}
	/* news single page
	----------------------------------------------------------- */
	.l_cotent {
		width: 100%;
		margin: 0;
	}
	.sidebar {
		width: 100%;
		margin-top: 40px;
	}
	.news_single_content .data {
		margin-bottom: 30px;
	}
	/* 
	 ページネーション
	----------------------------------------------------------- */
	.prev, .next {
		width:100%;
		margin:0 0 5px;
	}
	.next {
		float:right;
	}
	.single .nav-below {
		margin-top: 60px;
	}
	/*
	 foot
	----------------------------------------------------------- */
	.footer .footer-navArea {
		flex-direction: column;
		row-gap: 40px;
	}
	.footer .info {
		width: 100%;
	}
	.footer .info a {
		max-width: 217px;
	}
	.footer .sitemap {
		width: 100%;
	}
	.footer .footer-otherArea ul {
	column-gap: 23px;
}
}
@media screen and (max-width:640px) {
	.pc640{
		display: none;
	}
	br.pc640{
		display: none;
	}
	.sp640{
		display: block;
	}
	br.sp640{
		display: inherit;
	}
	.top_back{
		display: none;
	}
	.scroll {
		right: unset;
		left: 20px;
		width: 45px;
		height: 45px;
	}
	.scroll img {
		width: 35%;
	}
	.follow-link {
		right: 2%;
	}
	/* 
	 top
	----------------------------------------------------------- */
	.top_concept .imgArea .drawing {
		right: -25%;
		bottom: -45px;
	}
	.top_concept::before {
		top: 112px;
		left: -12%;
		transform: scale(1, -1);
		width: 100%;
		height: 120vw;
	}
	.top_concept::after {
		top: unset;
		bottom: 2%;
		transform: unset;
	}
	.top_concept .inner {
		flex-direction: column;
	}
	.top_concept .imgArea {
		padding-bottom: 20%;
		width: 80%;
	}
	.top_concept .imgWrap {
		height: auto;
		aspect-ratio: 101 / 145;
	}
	.top_concept .txtArea {
		margin-top: 110px;
		width: 100%;
	}
	.top_concept .ttl {
		text-shadow: unset;
		font-size: var(--fontsize-64);
	}
	.top_purchase .contentArea {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.top_faq .contentsArea .content {
		padding: 0 20px 35px;
	}
	.top_faq .contentsArea .content dt {
		&::before,&::after {
			right: 15px;
		}
	}
	.top_flow .content {
		flex-direction: column;
		&:not(:last-child) {
				&::after {
					top: 106%;
					left: 50%;
					transform: rotate(90deg) translateX(-50%);
				}
			}
	}
	.top_flow .imgArea {
		width: 100%;
		margin-bottom: 40px;
	}
	.top_flow .txtArea{
		width: 100%;
	}
	/* 
	 subpage共通
	----------------------------------------------------------- */
	/*
	 news
	----------------------------------------------------------- */
	.bcontwrap ul{
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
	}
	/* 
	 foot
	----------------------------------------------------------- */
	.footer .sitemap {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.footer .footer-otherArea  {
		flex-direction: column;
	}
	.footer .footer-otherArea ul {
		flex-direction: column;
	}
}