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


:root{
	--color-main:#333333;
	--color-blue:#C3DFF6;
	--color-gray:#efefef;
	--n-large:120px;
	--n-middle:90px;
	--n-small:60px;
}

button{
	font-family: "Noto Sans JP", sans-serif;
}

html{
	font-size:20px;
}

body{
	color:var(--color-main);
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.7;
	position: relative;
}

h1,h2,h3,h4,h5{
	font-weight: bold;
}

img{
	max-width: 100%;
	height:auto;
	vertical-align: bottom;
}

.header{
	padding:1rem 3rem;
}

.header-logo{
	width: 180px;
}

.font-en{
	font-family: "Inter", sans-serif;
}

.mainvisual{
	background:var(--color-blue);
	height:600px;
	position: relative;
	z-index: 1;
}

.mainvisual:after{
	content:"";
	display: block;
	height:130px;
	width:100%;
	background:url("../img/mv_green.png") center bottom no-repeat;
	background-size:cover;
	position: absolute;
	bottom:0;
	left:0;
	z-index: -3;
}

.mv_parts{
	position: absolute;
	z-index: -1;
}

.cloud_roll{
	position: absolute;
	z-index: -2;
	width:100%;
	height:100%;
	top:0;
	left:0;
	padding-top:100px;
}

.cloud_s{
	transform: scale(0.5)
}

.cloud_m{
	transform: scale(0.75)
}

.mv_wood{
	bottom:75px;
	left:10%;
}

.mv_weeds{
	bottom:100px;
	left:40%;
}

.mv_docan{
	bottom:50px;
	right:5%;
}

.cat_roll_box {
    transform-origin: top center;
}

.cat_roll_box img{
	margin-top:-5px;
}

@keyframes purupuru {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(6deg); }
    20%  { transform: rotate(-6deg); }
    30%  { transform: rotate(5deg); }
    40%  { transform: rotate(-5deg); }
    50%  { transform: rotate(3deg); }
    60%  { transform: rotate(-3deg); }
    70%  { transform: rotate(1deg); }
    80%  { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

.cat_roll_box.purupuru {
    animation: purupuru 1.5s ease-in-out;
}

.breadcrumbs{
	font-size:14px;
	max-width: 90%;
    width: 1200px;
	margin: auto;
	padding:0.5rem 0;
	white-space: nowrap;
	overflow: auto;
}

.breadcrumbs a{
	text-decoration: underline;
}

.mv_bnr{
	position: absolute;
	right:3rem;
	top:0;
	bottom:0;
	margin:auto;
	height:fit-content;
}

.bnr_wrapper{
	text-align: center;
	max-width: 90%;
	margin: auto;
}

.bnr_wrapper a{
	transition:opacity 0.2s ease;
}

.bnr_wrapper a:hover{
	opacity:0.8;
}

.lower_bnr_area{
	padding-top:var(--n-large);
}

.lower.slug-news .lower_bnr_area{
	padding-top:0;
	padding-bottom:var(--n-large);
}

.content section{
	padding-top:var(--n-large);
}

.content section.section-last{
	padding-bottom:var(--n-large);
}

.common_ttl{
	font-size: 2rem;
	text-align: center;
	margin-bottom: var(--n-middle);
}

.ttl_en,.ttl_jp{
	display: block;
}

.ttl_en{
	margin-bottom: 0.5rem;
	letter-spacing: 0.1em;
	line-height: 1;
}

.ttl_jp{
	font-size:1rem;
	margin-left: -0.75em;
}

.s_border_box{
	height:100%;
}

.s_border_box a{
	border:3px solid var(--color-gray);
	padding:3rem 3rem 3rem;
	border-radius: 10px;
	display: block;
	width:450px;
	box-sizing: border-box;
}

.thumb_img{
	text-align: center;
}

.s_border_box a img{
	transition:transform ease 0.5s;
	width:300px;
	max-width: 100%;
}

.u_series_box a img{
	transition:transform ease 0.5s;
}

.s_border_box a:hover img,.u_series_box a:hover img{
	transform:scale(1.05);
}

.s_slide_description{
	font-size:14px;
	padding-top: 1rem;
	box-sizing: border-box;
}

.common_slider{
	padding-left: 6rem;
}

.s_border_box h3,.u_series_ttl{
	text-align: center;
	position: relative;
	margin-bottom: 2rem;
	line-height: 1.2;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

.s_border_box h3:after,.u_series_ttl:after{
	content:"";
	display: block;
	width:1.5rem;
	height:0.25rem;
	background:var(--color-blue);
	position: absolute;
	bottom:-0.75rem;
	left:0;
	right:0;
	margin: auto;
}

.common_slider .splide__arrow--prev{
	display: none;
}

.common_slider .splide__arrow--next{
	left:3rem;
	right: auto;
	transform:rotate(180deg);
}

.common_slider .splide__pagination{
	bottom:-1.5rem;
}

.common_slider .splide__pagination__page.is-active{
	background:var(--color-blue);
	transform: scale(1);
}

.common_slider .splide__arrow{
	width:2rem;
	height:2rem;
	background:var(--color-main);
	opacity:1;
}

.common_slider .splide__arrow svg{
	fill:#ffffff;
}

.container-large{
	max-width: 90%;
	width:1500px;
	margin-left:auto;
	margin-right:auto;
}

.container-middle{
	max-width: 90%;
	width:1200px;
	margin-left:auto;
	margin-right:auto;
}

.container-small{
	max-width: 90%;
	width:800px;
	margin-left:auto;
	margin-right:auto;
}

.new-wrapper dl{
	display: flex;
	gap:3rem;
	padding-bottom:1.5rem;
	margin-bottom: 1.5rem;
	border-bottom:1px solid var(--color-gray);
}

.new-wrapper dl:last-of-type{
	border:none;
}

.new-wrapper dl dt{
	font-weight: bold;
	width:6em;
}

.new-wrapper dl dd{
	flex: 1;
}

.new-wrapper dl dd a{
	display: block;
	background:url("../img/link_arrow.svg") right 10px center no-repeat;
	background-size:auto 15px;
	padding-right: 30px;
}

footer{
	background:var(--color-main);
	padding:0.5rem 0;
	text-align: center;
	font-size:14px;
	font-weight: bold;
	color:#ffffff;
}

#primary-menu{
	position: fixed;
	width:30vw;
	height:100vh;
	right:0;
	top:0;
	background:#ffffff;
	z-index: 9;
	padding:6rem 3rem;
	box-sizing: border-box;
	transform:translateX(30vw);
	transition: transform 0.5s ease;
}

#primary-menu ul{
	display: flex;
	flex-direction: column;
	gap:3rem;
}

#primary-menu ul li{
	text-align: center;
	font-size:1rem;
	font-weight: bold;
}

#primary-menu ul li a{
	width:100%;
	display: block;
    background: url(../img/link_arrow.svg) right 10px center no-repeat;
    background-size: auto 15px;
    padding-right: 30px;
}

body.nav-active{
	overflow-y: clip;
}

body.nav-active #primary-menu{
	transform:translateX(0);
}

.nav-overlay{
	display: block;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	position: absolute;
	left:0;
	top:0;
	z-index: 2;
	opacity:0;
	pointer-events: none;
	transition:opacity 0.5s ease;
}

body.nav-active .nav-overlay{
	opacity:1;
	pointer-events: auto;
}

/*****ハンバーガー*****/
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  cursor: pointer;
  z-index: 20;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/***********下層ページ**************/

.lower_mv{
	height:300px;
	background:var(--color-gray) url("../img/logo-opacity.svg") center center no-repeat;
	background-size:auto 70%;
}

.lower_ttl_wrapper{
	width: 80%;
	margin:auto;
	display: flex;
	align-items: center;
	height:100%;
}

.lower_ttl_innner{
	font-size:2rem;
	line-height: 1.4;
}

.lmv_en_ttl{
	font-weight: bold;
	font-size:1.25rem;
	letter-spacing: 0.1em;
}

.lower_content section{
	padding-top: var(--n-large);
}

.lower_content section#item_detail{
	padding-top: var(--n-middle);
}

.box_list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:3rem;
}

.box_slide{
	width:calc((100% - 3rem) / 2);
}

.box_slide .s_border_box a{
	width:100%;
	box-sizing: border-box;
}

.u_series_image{
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.u_series_wrapper {
	display: flex;
	flex-wrap: wrap;
	gap:1.5rem;
}

.u_series_box{
	width:calc((100% - 1.5rem * 2) / 3);
}

.u_series_box a{
	display: block;
	border:3px solid var(--color-gray);
	background:#efefef;
	padding:3rem 3rem 3rem;
	border-radius: 10px;
}

.detail_btn{
	font-weight: bold;
	background:var(--color-main) url("../img/link_arrow_white.svg") right 15px center no-repeat;
	background-size:auto 12px;
	transition:background 0.3s ease;
	border-radius: 999px;
	color:#ffffff;
	text-align: center;
	font-size:14px;
	padding:0.5rem;
	margin-top: 3rem;
}

.item_detail_wrapper + .detail_btn{
	margin-top: 1.5rem;
}

.u_series_box a:hover .detail_btn{
	background:#666666 url("../img/link_arrow_white.svg") right 15px center no-repeat;
	background-size:auto 12px;
}

.about_wrapper{
	width:900px;
	box-sizing: border-box;
	max-width: 90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: var(--n-large);
	background:#f3f9fd;
	padding:3rem 3rem 3rem;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	gap:3rem;
	justify-content: center;
}

.a_image_inner{
	width:250px;
}

.about_description{
	flex:1;
}

.about_description{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ada_ttl{
	margin-bottom: 1.5rem;
}

.same_series_btn{
	width:320px;
	max-width: 100%;
	margin-left:auto;
	margin-right: auto;
	margin-top: 1.5rem;
}

.same_series_btn a{
	font-weight: bold;
	background:var(--color-main) url("../img/link_arrow_white.svg") right 15px center no-repeat;
	background-size:auto 12px;
	transition:background 0.3s ease;
	border-radius: 999px;
	color:#ffffff;
	text-align: center;
	font-size:14px;
	padding:0.5rem 3rem;
	display: block;
	width:100%;
	box-sizing: border-box;
}

.item-sub-ttl{
	text-align: center;
	font-weight: bold;
	margin-bottom: 3rem;
}

.mb-m{
	margin-bottom: var(--n-middle);
}

.mb-s{
	margin-bottom:var(--n-small);
}

.u_series_tri .u_series_box a{
	background:#efefef;
}

.all_items_btn a{
	font-weight: bold;
	background:#ef8686 url("../img/link_arrow_white.svg") right 15px center no-repeat;
	background-size:auto 12px;
	transition:opacity 0.3s ease;
	border-radius: 999px;
	color:#ffffff;
	text-align: center;
	font-size:16px;
	padding:1rem 3rem;
	display: block;
	width:400px;
	max-width:100%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right:auto;
}

.all_items_btn a:hover{
	opacity:0.8;
}

.news_list_btn a,.contact-btn a{
	font-weight: bold;
	background:var(--color-main) url("../img/link_arrow_white.svg") right 15px center no-repeat;
	background-size:auto 12px;
	transition:opacity 0.3s ease;
	border-radius: 999px;
	color:#ffffff;
	text-align: center;
	font-size:16px;
	padding:1rem 3rem;
	display: block;
	width:400px;
	max-width:100%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right:auto;
	margin-top: 3rem;
}

.lower.wp-singular .news_list_btn a{
	max-width: 90%;
}

.series_list .news_list_btn a{
	margin-top: 6rem;
}

.news_list_btn a:hover,.contact-btn a:hover{
	opacity:0.8;
}

.about_image{
	text-align: center;
}

.common-news-wrapper{
	padding-top: var(--n-large);
	padding-bottom: var(--n-large);
}

#news{
	padding-bottom: var(--n-large);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 40px 0;
    font-size: 16px;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.pagination a:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.pagination .current {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    border-color: #333;
    cursor: default;
}

.contact-lead{
	margin-bottom: 3rem;
	text-align: center;
	
}

.contact-wrapper h3{
	margin-bottom: 1.5rem;
	text-align: center;
}

.contact-wrapper ul li{
	position: relative;
	padding-left: 20px;
}

.contact-wrapper ul li:after{
	content:"";
	display: block;
	width:10px;
	height:10px;
	border-radius: 100%;
	position: absolute;
	left:0;
	top:12px;
	background:var(--color-gray);
}

.contact-wrapper ul li:not(:last-of-type){
	margin-bottom: 1.5rem;
}

.u_series_box iframe{
	max-width: 100%;
}

.contact_form_wrapper label{
	display: flex;
	width:100%;
}

.cf_ttl{
	font-weight: bold;
	font-size:14px;
	line-height: 1;
	width:10em;
	padding-top: 9px;
}

.wpcf7-form-control-wrap{
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wpcf7-form-control-wrap input,.wpcf7-form-control-wrap textarea{
	width:100%;
	padding:0.5rem;
}

.wpcf7-form-control.wpcf7-submit{
	font-weight: bold;
	background:var(--color-main) url("../img/link_arrow_white.svg") right 15px center no-repeat;
	background-size:auto 12px;
	transition:opacity 0.3s ease;
	border-radius: 999px;
	color:#ffffff;
	text-align: center;
	font-size:16px;
	padding:1rem 3rem;
	display: block;
	width:400px;
	max-width:100%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right:auto;
	margin-top: 1.5rem;
}

.wpcf7-form-control.wpcf7-submit:hover{
	opacity:0.8;
}

.wpcf7-not-valid-tip,.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output,.wpcf7 form.sent .wpcf7-response-output{
	font-size:14px;
}

.wpcf7-spinner{
	display: none;
}

.item_detail_wrapper{
	padding-top: 1rem;
}

.detail_price{
	font-weight: bold;
	text-align: center;
	font-size: 14px;
	padding-bottom: 0.5rem;
}

.detail_attention{
	font-size:12px;
}

.detail_attention li{
	position: relative;
	padding-left: 1.2em;
	line-height: 1.4;
}

.detail_attention li:not(:last-of-type){
	margin-bottom: 0.5rem;
}

.detail_attention li:after{
	content:"※";
	position: absolute;
	left:0;
	top:0;
}

.img_pc{
	display: inline;
}

.img_sp{
	display: none;
}

@media screen and (max-width:1200px) { 
	.mv_bnr img{
		width:300px;
	}
	#primary-menu{
		width:50vw;
		transform: translateX(50vw);
	}
}

@media screen and (max-width:1000px) {
	.u_series_box{
		width: calc((100% - 1.5rem * 1) / 2);
	}
}

@media screen and (max-width:800px) {
	html{
		font-size:16px;
	}
}

@media screen and (max-width:600px) {
	
	:root{
		--n-large:90px;
		--n-middle:60px;
		--n-small:30px;
	}
	
	#primary-menu{
		width:100vw;
		transform: translateX(100vw);
	}
	
	#primary-menu ul li{
		font-size:1rem;
	}
	
	.common_slider {
		padding-left: 2rem;
	}
	
	.common_slider .splide__arrow--next{
		left:0.5rem;
	}
	
	.common_slider .splide__arrow{
		width:1rem;
		height:1rem;
	}
	
	.common_slider .splide__arrow svg{
		width:0.5em;
		height:0.5em;
	}
	
	.s_border_box a{
		width:300px;
		padding:3rem 1.5rem;
	}
	
	.u_series_box a{
		padding:3rem 1.5rem;
	}
	
	.u_series_box a img{
		width:200px;
	}
	
	.s_border_box a img{
		width:200px;
	}
	
	.new-wrapper dl{
		gap:1.5rem;
	}
	
	.mv_bnr{
		top:auto;
		bottom:3rem;
		right:0;
		left:0;
		text-align: center;
	}
	
	.cat_roll_box img{
		height:300px;
		width:auto;
	}
	
	.header-logo{
		width:50%;
	}
	
	.header{
		height:60px;
		box-sizing: border-box;
		padding-left: 1.5rem;
	}
	
	.hamburger{
		top:15px;
	}
	
	.lower_mv{
		height:180px;
		background-size: auto 40%;
	}
	
	.lower_ttl_innner,.common_ttl{
		font-size:1.5rem;
	}
	
	.box_slide{
		width:100%;
	}
	
	.box_list{
		gap:1.5rem;
	}
	
	.lower_ttl_wrapper{
		width:90%;
	}
	
	.u_series_box{
		width:100%;
	}
	
	.about_wrapper{
		width:100%;
		flex-direction: column;
		gap:1.5rem;
		padding:3rem 1.5rem;
	}
	
	.same_series_btn{
		width:100%;
	}
	
	.u_series_box iframe{
		width:100%;
	}
	
	.a_image_inner{
		width:100%;
	}
	
	.contact-wrapper ul li:after{
		top:9px;
	}
	
	.lower_ttl_innner{
		text-align: center;
		margin-left: auto;
		margin-right:auto;
	}
	
	.contact_form_wrapper label{
		flex-direction: column;
	}
	
	.contact_form_wrapper label br{
		display: none;
	}
	
	.cf_ttl{
		padding-top:0;
		margin-bottom: 1rem;
	}
	
	.ada_ttl{
		text-align: center;
	}
	
	.img_pc{
		display: none;
	}

	.img_sp{
		display: inline;
	}
}