/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20240601
*/



/* ===========================================
 共通（common）
 * ======================================== */
body{
	margin:0;
	font-family: "Notoserif", serif;
	font-weight:500;
	line-height:2.3em;
}
img {
    max-width: 100%;
    height: auto;
}
main{
	margin-right:0 !important;
	padding:0 !important;
}
main, .entry-content,.entry-content > div{
	margin-bottom:0;
}

@font-face {
	font-family: "Notoserif";
	src: url("fonts/NotoSerifJP-Medium.woff") format("woff"),
		url("fonts/NotoSerifJP-Medium.ttf") format("truetype");
}

/* 枠組み（container）
------------------------------------------ */
.wrapper{
	width:100%;
	max-width:100vw;
	overflow:hidden;
	background:#171717;
	color:#fff;
}
.container_box{
	margin:auto;
	padding:8% 125px;
}

/*タブレット横向き以下*/
@media screen and (max-width: 1199px) {
	.container{
		margin:auto;
		padding:8% 125px;
	}
}
/*タブレット縦向き以下*/
@media screen and (max-width:991px){
	.container{
		margin:auto;
		padding:8% 125px;
	}
}
/* レスポンシブ（responsive）
------------------------------------------ */
.pc{
	display:block !important;
}
.sp{
	display:none !important;
}

.pc_1500{
	display:none !important;
}
.tb_yoko{
	display:none !important;
}

/*1500px以下*/
@media screen and (max-width: 1500px) {
	.pc_1500{
		display:block !important;
	}
}
/*タブレット横向き以下*/
@media screen and (max-width: 1199px) {
	.tb_yoko{
		display:block !important;
	}
}
@media screen and (max-width:767px){
	.sp{
		display:block !important;
	}
	.pc{
		display:none !important;
	}
}


/* FLEX（flex）
------------------------------------------ */
.flex{
	display:flex;
	align-items:center;
	flex-wrap: wrap;
}
.flex-between{
	justify-content:space-between;
}
.flex-center{
	justify-content:center;
}
.flex-start{
	justify-content:start;
}
.flex-end{
	justify-content:end;
}
.flex-align-start{
	align-items: start;
}
.flex-nowarap{
	flex-wrap:nowrap;
}
.flex-item10{
	width:10%;
}
.flex-item15{
	width:15%;
}
.flex-item20{
	width:20%;
}
.flex-item25{
	width:25%;
}
.flex-item30{
	width:33%;
}
.flex-item40{
	width:40%;
}
.flex-item45{
	width:45%;
}
.flex-item60{
	width:60%;
}
.flex-item70{
	width:70%;
}
.flex-item75{
	width:73%;
}
@media screen and (max-width:767px){
	.flex {
		flex-direction: column;        
		align-items: center;            
		justify-content: center;      
	}
	.flex-item10,.flex-item15,.flex-item20,.flex-item25,.flex-item30,.flex-item40,.flex-item45,.flex-item60,.flex-item70,.flex-item75{
		width: 100%;
	}
	.reverse{
		flex-direction: column-reverse;
	}
}

/* POSITION（position）
------------------------------------------ */
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}

/* WIDTH（width）
------------------------------------------ */
.w-80{
	width: 80%;
}
.w-90{
	width: 90%;
}

/* ===========================================
 アニメーション（anime）
 * ======================================== */
.fade {
  opacity: 0;
}
.fadeAnime {
  animation-name: fadeAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeDown{
	opacity:0;
}
.fadeDownAnime{
	animation-name:fadeDownAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.fadeUp{
	opacity:0;
	transform: translateY(50px);
}
.fadeUpAnime{
	animation-name:fadeUPAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUPAnime{
  from {
	  opacity: 0;
	  transform: translateY(50px);
  }

  to {
	  opacity: 1;
	  transform: translateY(0);
  }
}

/*左から右にフェードイン*/
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime {
  0% {
     opacity: 0;
     transform: translateX(-20px);
  }
  100% {
     opacity: 1;
     transform: translateX(0);
  }
}

/*右から左にフェードイン*/
.fadeIn2{
	animation-name:fadeInAnime2;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeInAnime2 {
  0% {
     opacity: 0;
     transform: translateX(20px);
  }
  100% {
     opacity: 1;
     transform: translateX(0);
  }
}

/*拡大フェードイン*/
.fadeScale{
	animation-name:fadeScaleAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeScaleAnime {
  0% {
     opacity: 0;
     transform: scale(0.9);
  }
  100% {
     opacity: 1;
     transform:scale(1);
  }
}

/* ===========================================
 ヘッダー（header）
 * ======================================== */
.header{
	position:fixed;
	width:100%;
	height:10vh;
	background:transparent;
	color:black;
	font-family: "Notoserif", serif;
	font-weight:500;
	overflow:hidden;
	z-index:9998;
	transition: .7s;
}

.header.is_scrolled{/*スクロール時にクラス付与*/
	background:rgba(255,255,255,0.8);
}
.header .title{
	text-align:center;
}
.header .title img{
	width:60%;
}
.header a{
	text-decoration:none;
	color:black;
	margin:0 15px;
}
.home .header a{
	color:#fff;
}

.header.is_scrolled a{/*スクロール時にクラス付与*/
	color:black;
}
.header .menu{
	padding-right:20px;
}

.header .menu a{
	position:relative;
}
.header .menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;        
	width: 100%;
	height: 1px;          
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.header .menu a:hover::after {
	transform: scaleX(1);  
}

.header .tel{
	display:inline-block;
	text-align:center;
	line-height: 1.4;
	font-size:1.4em;
	margin-left:20px;
}
.header .tel span{
	display: block; 
	font-size:12px;
}

/*右側の固定メニュー*/
header .side-menu {
	position:fixed;
	right:0;
	width:120px;
	height:120px;
	max-width:9%;
	z-index:9999;
}
header .side-menu .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	color: #fff;
	text-decoration: none;
	font-size: 97%;
	font-weight:bold;
	line-height: 1.3;
	margin-bottom:4px;
	aspect-ratio: 1 / 1;
}
header .side-menu .item img {
	width: 50px;
	height: auto;
	margin-bottom: 0;
}
/* 背景色だけ個別指定（最小コード） */
header .item-red { background:#E85F46; transition: background-color 0.3s ease;}
header .item-pink { background:#F9BBA8; transition: background-color 0.3s ease;}
header .item-gray { background:#C7C2BE; transition: background-color 0.3s ease;}
header .item-tel {  background:#FFF; border:solid 1px #F9BBA8; color:black !important;}/*ハンバーガーメニューで利用*/

header .item-red:hover { background:#e64e32;}
header .item-pink:hover { background:#fcab92; }
header .item-gray:hover { background:#aba8a6; }

/*ハンバーガーメニュー
------------------------------------------ */
.hamburger-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height:50px;
	padding:5px 0;
	z-index: 1000;
	background:#fff;
}
.hamburger-menu .flex{
	flex-direction:row;
}
.hamburger-menu .flex .logo{
	width:75%;
	text-align:left;
	padding-left:5px;
	border-right:solid 1px grey;
}
.hamburger-menu .flex .logo img{
	width:auto;
	max-height:40px;
}
.hamburger-menu .flex .tel,.hamburger-menu .flex .btn{
	width:15%;
	height:40px;
}
.hamburger-menu .flex .tel{
	border-right:solid 1px grey;
}
.hamburger-menu .flex .tel img{
	width:auto;
	height:25px;
}
.menu-btn {
    position: static;
    display: flex;
    height: 22px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 101;
	border-radius:50%;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 30px;
    background-color: #D4533B;
    position: absolute;
	z-index:11111;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
	background-color:#D4533B;
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
	background-color:#D4533B;
}
#menu-btn-check {
    display: none;
}


.menu-content {
    width: 70%;
    height: calc(100% - 50px);
    position: fixed;
    top: 50px;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    background-color: #f0e8e6;
	opacity:1;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
    padding: 10px 20px;
}
.menu-content ul li {
    list-style: none;
	border-bottom:solid 1px #D4533B;
}
.menu-content ul li:not(.menu_category) {
    padding-left:30px;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 90% !important;
	font-weight:normal;
    box-sizing: border-box;
    color:black;
    text-decoration: none;
    padding: 12px 15px 13px 0;
    position: relative;
}
.menu-content .button{
	width:80%;
	display:block;
	padding:10px;
	margin:auto;
	margin-top:10px;
	border-radius:50px;
	font-size:80%;
	color:#fff;
}
.menu-content .button:hover{
	text-decoration:none;
}

.menu-content .tel_guide{
	font-size:70% !important;
}

#menu-btn-check:checked ~ .menu-content {
	left:30%;/*メニューを画面内へ*/
}

/*ハンバーガーメニューここまで*/


/* ===========================================
 トップページ（front-page）
 * ======================================== */
.front .fv{
	position:relative;
	padding-right:125px;
	background:
		url("images/front/bg-pt.png") right top / 125px 100% no-repeat,
		#fff;
}

.front .fv .three-split{
	display:flex;
	width:100%;
	height:90vh;
}

.front .fv .left{ flex:2; margin-right:5px; position:relative;}
.front .fv .right{ flex:1; display:flex; flex-direction:column; gap:5px;}
.front .fv .top,
.front .fv .bottom{ flex:1;　min-height: 0;  overflow: hidden;}


/* ===== スライド共通 ===== */

.slide{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
}

.slide-track{
	display:flex;
	width:200%;
	height:100%;
	animation: slideMove 10s ease-in-out infinite;
}

.slide-track.reverse{
	animation-name: slideMoveReverse;
}

.slide.delay .slide-track{
	animation-delay:4s;
}

.slide-track img{
	width:50%;
	height:100%;
	object-fit:cover; /* ← 画質・比率の要 */
	flex-shrink:0;
}
@keyframes slideMove{
	0%,30%{ transform:translateX(0); }
	40%,70%{ transform:translateX(-50%); }
	80%,100%{ transform:translateX(0); }
}

@keyframes slideMoveReverse{
	0%,30%{ transform:translateX(-50%); }
	40%,70%{ transform:translateX(0); }
	80%,100%{ transform:translateX(-50%); }
}

.front .fv .three-split .midashi{
	position: absolute;
	left: 30%;
	top: 70%;
	transform: translate(-50%, -50%);
	z-index: 5;        
}
.front .fv .three-split .midashi h2{
	background-color:#D4533B;
	color:#fff;
	padding:4% 2% !important;
	font-size:2.65vw !important;
	font-weight:bold;
	display: inline-block;  
	white-space: nowrap;    
}
.front .fv .three-split .midashi p{
	color:#fff;
	font-size:1.5em !important;
	font-weight:400;
}
.front .fv .vertical-label {
	position: absolute;
	top: 70%;
	right: calc(105px - 125px); 
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center center;
	font-size: 17px !important;
	color: #CCCCCC;
	white-space: nowrap;
	pointer-events: none;   
	font-weight:normal;
}


.front .gaiyo .submidashi{
	position: relative;
	margin:0 auto !important;
	font-weight:bold !important;
	font-size:140% !important;
	display: inline-block;     
	padding-bottom: 12px;      
	line-height: 1.6;        
	background-image:
		radial-gradient(circle, #D4533B 2px, transparent 2px),
		radial-gradient(circle, #D4533B 2px, transparent 2px);
	background-size: 8px 8px;   
	background-repeat: repeat-x;
	background-position:
		left bottom,            
		left calc(100% - 5px);
	z-index: 1;
}
.front .gaiyo .submidashi .concept_en{
	position: absolute;
	top: -70px;      
	left: -80px;
	width: 200px;    
	height: 90px;
	background: url("images/front/concept_en.png") no-repeat center / contain;
	z-index: -1;      
	pointer-events: none;
}

.front .gaiyo h3{
	font-weight:bold !important;
	font-size: 200% !important;
	line-height:2.4em !important;
	letter-spacing: .1em;
}
.front .gaiyo h3 .large{
	font-size:1.7em;
}
.front .gaiyo h3 .red{
	color:#D4533B;
}
.front .gaiyo .text{
	margin:50px auto 0 auto;
	font-weight:bold !important;
}
.front .slick-slide img{
	width:90%;
	border-radius:10px;
}

.front .strengths .strengths_box{
	margin:100px auto;
}
.front .strengths .strengths_box img{
	border-radius:10px;
}
.front .strengths .strengths_box .text_box{
	padding-top:30px;
}
.front .strengths .strengths_box .midashi{
	color:#D4533B;
	font-size:140% !important;
	font-weight:bold !important;
}
.front .strengths .strengths_box .title{
	color:#ffff;
	font-size:180% !important;
	font-weight:bold !important;
	background:#D4533B;
	padding:10px;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
	transition:
		clip-path 0.6s ease,
		opacity 0.3s ease;
}
.front .strengths .strengths_box .title.is-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
}
.front .strengths .strengths_box .text{
	margin-top:50px;
	font-weight:bold !important;
}


.front .case{
	background: url("images/front/tail_bg.jpg") no-repeat;
	background-position: 100px top; /* ← 左から100pxの位置に開始 */
	background-size: calc(100% - 100px) 100%; 
	padding-left:125px;/*左側に合わせて125pxの余白*/
	padding-right:125px;
	padding-top:8%;
	padding-bottom:8%;
}
.front .case h3{
	font-size:300% !important;
	font-weight:bold !important;
	letter-spacing: .3em;
	display:inline-block;
	position: relative;
	margin:0 auto !important;
	z-index:1;
}
.front .case h3 .case_en{
	position: absolute;
	top: -55px;      
	left: -70px;
	width: 200px;    
	height: 90px;
	background: url("images/front/case_en.png") no-repeat center / contain;
	z-index: -1;      
	pointer-events: none;
}
.front .case .button{
	display: inline-block;
    padding: 18px 108px 18px 80px;
    background: #D4533B;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    position: relative;
	width:400px;
	max-width:100%;
}
.front .case .button::before{
	content: "";
	position: absolute;
	right: 30px;
	top: 45%;
	width: 9px;
	height: 9px;
	border-top:solid 3px #D4533B;
	border-right: solid 3px #D4533B;
	transform: rotate(45deg);
	z-index: 2;
}

.front .case .button:after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
.front .case .button:hover{
	background:#e64e32;
}
.front .case .case_box{
	width:90%;
	aspect-ratio: 12 / 8;   
	margin:70px auto;
	padding:2% 4%;
	border-radius:20px;
	position:relative;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:bottom;
}
.front .case .case_box.box1{
	background-image:url("images/front/case_image1.jpg");
}
.front .case .case_box.box2{
	background-image:url("images/front/case_image1.jpg");
}
.front .case .case_box .badge{
	background:#D4533B;
	padding:10px;
	color:#FFF;
	border-radius:0px;
}
.front .case .case_box .comment{
	max-width:70%;
	position: absolute;
	bottom: 40px; 
	left: -15px;
	display: inline;
	background: #fff;
	padding: 6px 12px;
	line-height: 1.6;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	font-weight:bold;
}

.front .select_menu h3{
	font-size:250% !important;
	font-weight:bold !important;
	letter-spacing: .3em;
	position:relative;
	display:inline-block;
	z-index:1;
}
.front .select_menu h3 .select_menu_en{
	position: absolute;
	top: -55px;      
	left: -70px;
	width: 200px;    
	height: 90px;
	background: url("images/front/select_menu_en.png") no-repeat center / contain;
	z-index: -1;      
	pointer-events: none;
}
.front .select_menu{
	padding:10% 0;
}
.front .select_menu .box{
	cursor: pointer;
	margin:50px auto;
}
.front .select_menu .box .img-wrap {
	position: relative;
	overflow: hidden;
	border-radius:10px;
	box-shadow: 0 10px 22px rgba(0,0,0,0.18);
	transition: box-shadow .3s ease, transform .3s ease;
}

.front .select_menu .box .img-wrap img {
	display: block;
	width: 100%;
	height: auto;
	border-radius:10px;
}

.front .select_menu .box .img-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(232, 95, 70, 0.25);
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 0.35s ease, transform 0.45s ease;
	border-radius:10px;
}

.front .select_menu .box .img-wrap::after {
	content: "くわしくみる ＞";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	opacity: 0;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	white-space: nowrap;
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}


.front .select_menu .box:hover .img-wrap {
	box-shadow: 0 16px 32px rgba(0,0,0,0.25);
	transform: translateY(-3px);
}
.front .select_menu .box:hover .img-wrap::before {
	opacity: 1;
	transform: scale(1);
}

.front .select_menu .box:hover .img-wrap::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.front .select_menu .title{
	width:70%;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
	font-size:180% !important;
	font-weight:bold;  
	padding-bottom: 18px;      
	line-height: 1.6;        
	background-image:
		radial-gradient(circle, #D4533B 2px, transparent 2px),
		radial-gradient(circle, #D4533B 2px, transparent 2px);
	background-size: 8px 8px;   
	background-repeat: repeat-x;
	background-position:
		left bottom,            
		left calc(100% - 5px);   
}
.front .select_menu .button{
	display: inline-block;
    padding: 18px 108px 18px 80px;
    background: #D4533B;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    position: relative;
	width:400px;
	max-width:100%;
	margin-top:7%;
}
.front .select_menu .button::before{
	content: "";
	position: absolute;
	right: 30px;
	top: 45%;
	width: 9px;
	height: 9px;
	border-top:solid 3px #D4533B;
	border-right: solid 3px #D4533B;
	transform: rotate(45deg);
	z-index: 2;
}

.front .select_menu .button:after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
.front .select_menu .button:hover{
	background:#e64e32;
}


.front .beginner{
	padding:8% 10%;
	background-image:url("images/front/beginner_bg.jpg");
	background-position:center;
	background-size:cover;
}
.front .beginner h3{
	position:relative;
	display:inline-block;
	font-weight:bold !important;
	font-size: 200% !important;
	line-height:2.4em !important;
	letter-spacing: .1em;
	color:#fff !important;
}
.front .beginner h3::before{
	content: "" !important;
	position: absolute;
	left: -130px;            /* ← 吹き出し分だけ左へ */
	top: 30%;
	transform: translateY(-50%);
	width: 130px;            /* 吹き出し画像サイズ */
	height: 130px;
	background: url("images/fukidashi.png") no-repeat center / contain;
}
.front .beginner h3 .large{
	font-size:150% !important;
}
.front .beginner .beginner_box{
	background:rgba(255,255,255,0.8);
	color:#fff !important;
	padding:5%;
	margin-top:50px;
	border-radius:10px;
}

.front .beginner .beginner_box .flex{
	 gap: 3%;
}
.front .beginner .beginner_box .box{
	width: calc((100% - 6%) / 3); /* gap 3% × 2 */
	text-align: center;
	background:#fff;
	padding:4% 1% 2% 1%;
	border-radius:10px;
}
.front .beginner .beginner_box .box .image{
	margin-bottom:20px;
}
.front .beginner .beginner_box .box .image img{
	width:80%;
}
.front .beginner .beginner_box .box a{
	font-size:150% !important;
	font-weight:bold !important;
	color: #D4533B !important;
	text-decoration:none !important;
}
.front .beginner .beginner_box .box a .small{
	font-weight:normal !important;
	font-size:80% !important;
}
.front .column{
	background: url("images/front/tail_bg.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	padding-left:125px;/*左側に合わせて125pxの余白*/
	padding-right:125px;
	padding-top:5%;
	padding-bottom:8%;
}
.front .column .title{
	font-size:300% !important;
	font-weight:bold !important;
	letter-spacing: .3em;
	position:relative;
	display:inline-block;
	z-index:1;
}
.front .column .title .column_en{
	position: absolute;
	top: -55px;      
	left: -70px;
	width: 200px;    
	height: 90px;
	background: url("images/front/column_en.png") no-repeat center / contain;
	z-index: -1;      
	pointer-events: none;
}
.front .column .button{
	display: inline-block;
    padding: 18px 108px 18px 80px;
    background: #D4533B;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    position: relative;
	width:400px;
	max-width:100%;
}
.front .column .button::before{
	content: "";
	position: absolute;
	right: 30px;
	top: 45%;
	width: 9px;
	height: 9px;
	border-top:solid 3px #D4533B;
	border-right: solid 3px #D4533B;
	transform: rotate(45deg);
	z-index: 2;
}
.front .column .button:after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
.front .column .button:hover{
	background:#e64e32;
}

.front .future{
	overflow-x:none;
}
.front .future img{
	width:100vw;
}
/* ===========================================
 固定／お問い合わせ（contact_cta）
 * ======================================== */
.contact_cta{
	padding:10% 0;
	background:#D4533B;
}
.contact_cta h3{
	color:#fff !important;
	font-size: 300% !important;
	font-weight: bold !important;
	letter-spacing: .3em;
	position: relative;
	display: inline-block;
	margin:0 auto !important;
	padding-left: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
	z-index: 1;
}
.contact_cta h3 span{
	position: absolute;
	top: -55px;      
	left: -40px;
	width: 200px;    
	height: 90px;
	background: url("images/contact_en.png") no-repeat center / contain;
	z-index: -1;      
	pointer-events: none;
}
.contact_cta .text{
	color:#fff !important;
}
.contact_cta .button{
	width:20em;
	display: inline-block;
	padding:5% 0;
	padding-right:8%;
    background: #D4533B;
    border-radius: 999px;
	border:solid 3px #fff;
	color: #fff !important;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    position: relative;
	margin:50px auto 20px auto;
}
.contact_cta .button:before{
	content: "＞";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #D4533B;
    font-size: 15px;
    z-index: 2;
}
.contact_cta .button:after{
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
.contact_cta .button.right{
	background:#fff;
	color:#D4533B !important;
	border:none !important;
	text-align:center;
	margin-left:15px;
}
.contact_cta .button.left{
	text-align:center;
	margin-right:15px;
}


/* ===========================================
 会社概要（company）
 * ======================================== */
/*他の下層ページでも使用*/
.page-container{
	padding-top:10vh;
}
.company-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/company/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.company-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.company-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}

.company-page h3.title{
	font-size:300% !important;
	color:#D4533B !important;
	line-height:1.5em !important;
}
.company-page h3.title .small{
	font-size:70% !important;
	font-weight:bold !important;
	color:black !important;
}
.company-page .text{
	font-weight:bold;
	margin-top:50px;
}

.company-page .image{
	overflow-x:hidden;
}
.company-page .image img{
	width:100vw;
}
.company-page .table_box{
	background:#F7F7F7;
}
.company-page .table_box .box{
	background:#fff;
	padding:5%;
	border-radius:20px;
}
.company-page .table_box .box table{
	width:80%;
	margin:auto;
}
.company-page .table_box .box table th, .company-page .table_box .box table td{
	border-left:none;
	padding:20px 0 20px 15px;
	border-bottom:#F6B5A1 solid 2px;
	font-weight:bold;
}
.company-page .message_box{
	overflow-x:hidden;
}
.company-page .message_box .title{
	color:black !important;
	padding-left:5%;
	line-height:1.0em !important;
}
.company-page .message_box .title span{
	font-size:0.5em !important;
}
.company-page .message_image{
	text-align:right;
	position:relative;
	margin-top:100px;
}
.company-page .message_image img{
	width:75%;
	border-radius:20px 0 0 20px;
	display: block;
	margin-left: auto;
	margin-right: calc(-1 * 125px);
}
.company-page .message_image .text{
	width:45%;
	position:absolute;
	top:0;
	left:0;
	text-align:left;
	line-height:2.5em;
}
.company-page .company_map{
	margin-top:100px;
}


/* ===========================================
 商品ラインナップ（product）
 * ======================================== */
.product-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/company/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.product-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.product-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}

/* ===========================================
 料金・プラン（pricing）
 * ======================================== */
.pricing-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/company/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.pricing-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.pricing-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}


/* ===========================================
 はじめての方へ（guide）
 * ======================================== */
.guide-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/company/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.guide-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.guide-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}


/* ===========================================
 ご利用の流れ（flow）
 * ======================================== */
.flow-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/company/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.flow-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.flow-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}

/* ===========================================
 保証・アフターサポート（warranty）
 * ======================================== */
.warranty-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/company/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.warranty-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.warranty-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}


/* ===========================================
 よくあるご質問（faq）
 * ======================================== */
.faq-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/faq/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.faq-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.faq-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}

.faq-page .title{
	font-weight:bold;
	font-size:150%;
	line-height:1.5em;
}
.faq-page .title a{
	color:black;
	text-decoration:none;
}
.faq-page .title a:hover{
	text-decoration:underline;
}
.faq-page h3{
	border-left:solid 5px #d6402f;
	color:#d6402f;
	padding-left:13px;
	margin-bottom:35px;
}
.faq-page h3:not(.faq-page h3.top){
	margin-top:50px;
}

/*FAQのボックスCSS*/
.accordion-content {
	display: none;
}
/* 装飾用 */
.faq-page .accordion-header {
	background-color: #ffeeea;
	padding: 30px 55px 30px 20px;
	margin: 30px 0 0;
	transition: background .3s ease;
	cursor: pointer;
	position: relative;
	border-radius:20px;
	color:#d6402f;
	font-weight:bold;
	font-size:120%;
}

.faq-page .accordion-header::before,
.faq-page .accordion-header::after{
	position:absolute;
	content:'';
	top:1px;
	right:50px;
	bottom:0;
	width:20px;
	height:4px;
	margin:auto;
	background:#d6402f;
}
.faq-page .accordion-header::after{
	transform:rotate(-90deg);
	transition:transform 0.3s;
}
.faq-page .accordion-header.active::after{transform:rotate(0deg);}

.faq-page .accordion-content {
	background-color: #ffeeea;
	padding:30px 55px 30px 20px;
	border-radius:0 0 20px 20px;
	font-size:110%;
}

.faq-page .accordion-header span,
.faq-page .accordion-content span{
	padding-left: 30px;
	position: relative;
}

.faq-page .accordion-header span::before{
	position: absolute;
	content:"Q. ";
	top: -8px;
	left: 0;
	color:#d6402f;
	font-size: 22px;
}
.faq-page .accordion-content span::before{
    position: absolute;
	content:"A.";
	top: -8px;
	left: 0;
	color: #151E2F;
	font-size: 20px;
}

/* ===========================================
 サービスページ（車庫・物置・倉庫など）
 * ======================================== */
.service-page .fv{
	height:32vh;
	min-height:380px;
	background-image: url("images/garage-carport/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.service-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	line-height:1.5em !important;
	padding:3% !important;
	border-radius:10px;
}
.service-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
	color:black;
}
.service-page h2 .small.red{
	color:#D4533B;
	padding-bottom: 12px; 
	background-image: radial-gradient(circle, #D4533B 2px, transparent 2px), radial-gradient(circle, #D4533B 2px, transparent 2px);
    background-size: 8px 8px;
    background-repeat: repeat-x;
    background-position: left bottom, left calc(100% - 5px);
}

.service-page .achievements{
	min-height:95vh;
	padding:8% 3%;
	background-image:url("images/garage-carport/achievements_bg.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	position:relative;
}
.service-page .achievements h3{
	font-size:220% !important;
	line-height:1.7em;
	display: inline;
	line-height: 1.9;
	padding: 0.15em 0.35em;
	background: linear-gradient(
		transparent 35%,
		rgba(255,255,255,0.95) 55%,
		rgba(255,255,255,0.9) 75%,
		rgba(255,255,255,0.6) 90%,
		transparent 100%
	);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	text-shadow:
		0 0 18px rgba(255,255,255,0.55),
		0 0 36px rgba(255,255,255,0.35),
		0 0 60px rgba(255,255,255,0.2);
}

.service-page .achievements .left_box{
	position: absolute;
	top: 57%;
	left: 10%;               
	transform: translateY(-50%);
}

.service-page .achievements .button,.service-page .select_menu .button{
	display: inline-block;
    padding: 18px 108px 18px 80px;
    background: #D4533B;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    position: relative;
}
.service-page .achievements .button::before,.service-page .select_menu .button::before{
	content: "";
	position: absolute;
	right: 30px;
	top: 45%;
	width: 9px;
	height: 9px;
	border-top:solid 3px #D4533B;
	border-right: solid 3px #D4533B;
	transform: rotate(45deg);
	z-index: 2;
}

.service-page .achievements .button:after,.service-page .select_menu .button::after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
.service-page .achievements .button:hover,.service-page .select_menu .button::hover{
	background:#e64e32;
}
.service-page .achievements .text{
	margin:20px auto;
}

.service-page .gaiyo{
	background-image:url("images/garage-carport/tail_bg.jpg");
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.service-page .gaiyo h3{
	font-weight:bold !important;
	font-size: 200% !important;
	line-height:2.4em !important;
	letter-spacing: .1em;
	position:relative;
	display:inline-block;
	z-index:1;
}
.service-page .gaiyo h3 .large{
	font-size:1.7em;
}
.service-page .gaiyo h3 .red{
	color:#D4533B;
}
.service-page .gaiyo h3 .concept_en{
	position: absolute;
	top: -55px;      
	left: -70px;
	width: 200px;    
	height: 90px;
	background: url("images/garage-carport/concept_en.png") no-repeat center / contain;
	z-index: -1;      
	pointer-events: none;
}
.service-page .gaiyo .text {
	max-width:750px;
	margin: 50px auto !important;
    font-weight: bold !important;
}
.service-page .gaiyo .flex{
	margin:150px auto;
}
.service-page .gaiyo .flex img{
	border-radius:10px;
}
.service-page .gaiyo .flex .text_box .title{
	font-size:180% !important;
	font-weight:bold !important;
	padding-top:30px;
	padding-bottom:15px;
	line-height:1.5em !important;
	background-image: radial-gradient(circle, #D4533B 2px, transparent 2px), radial-gradient(circle, #D4533B 2px, transparent 2px);
    background-size: 8px 8px;
    background-repeat: repeat-x;
    background-position: left bottom, left calc(100% - 5px);
}
.service-page .gaiyo .flex .text_box .text .red{
	color:#D4533B;
}

.service-page .future{
	overflow-x:none;
}
.service-page .future img{
	width:100vw;
}

.service-page .select_menu .flex{
	margin:100px auto;
}
.service-page .select_menu .flex .button{
	/*ボタンデザイン詳細のCSSは前述*/
	width:95%;
}
.service-page .select_menu h3{
	font-size: 300% !important;
    font-weight: bold !important;
    letter-spacing: .3em
}

.service-page .roof-wrap{
	text-align: center;
	padding: 60px 0;
}
.service-page .roof{
	width: 100%;
	max-width: 1000px; 
	height: 60px;
	margin: 0 auto;  
	position: relative;
}
.service-page .roof::before,
.service-page .roof::after{
	content: "";
	position: absolute;
	bottom: 0;
	width: 50%;
	height: 2px;
	background: #e14b3b;
}
.service-page .roof::before{
	left: 0;
	transform: rotate(-8deg);   
	transform-origin: right center;
}
.service-page .roof::after{
	right: 0;
	transform: rotate(8deg);
	transform-origin: left center;
}
.service-page .roof-wrap h3{
	margin-top:100px;
	font-size: 200% !important;
	line-height:2.1em !important;
}
.service-page .roof-wrap h3 .red{
	font-size:1.5em !important;
	color:#D4533B;
	padding-bottom:15px;
	line-height:1.5em !important;
	background-image: radial-gradient(circle, #D4533B 2px, transparent 2px), radial-gradient(circle, #D4533B 2px, transparent 2px);
    background-size: 8px 8px;
    background-repeat: repeat-x;
    background-position: left bottom, left calc(100% - 5px);
}

/*車庫・カーポート*/
.garage-carport .fv{
	background-image: url("images/garage-carport/fv_bg.jpg");
}
.garage-carport .achievements{
	background-image:url("images/garage-carport/achievements_bg.jpg");
}

/*倉庫*/
.warehouse .fv{
	background-image: url("images/warehouse/fv_bg.jpg");
}
.warehouse .achievements{
	background-image:url("images/warehouse/achievements_bg.jpg");
}

/*物置*/
.storage-shed .fv{
	background-image: url("images/storage-shed/fv_bg.jpg");
}
.storage-shed .achievements{
	background-image:url("images/storage-shed/achievements_bg.jpg");
}

/* ===========================================
 コラム・新着情報（column　※事例一覧などのCSSを一部利用）
 * ======================================== */
.column-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/case/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.column-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.column-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}
body .column-page .case-list_box .case-list .case-title{
	padding-bottom:20px !important;
	font-size:120% !important;
}
.column-page .case-layout{
  display: flex;
  gap: 60px;
}

.column-page .case-main{
	width: 85%;
}
.column-page .case-sidebar{
	width: 15%;
	margin-top:6%;
}
.column-page .case-sidebar .column-tags__title{
	font-size:130% !important;
}
.column-page .case-sidebar .column-tags__title span{
	color:#777;
	font-size:70% !important;
}
.column-page .case-sidebar .column-tags__list li{
	list-style:none;
	border-bottom:solid 1px #7777;
	padding:5px 0;
}
.column-page .case-sidebar .column-tags__list li a{
	color: #000;
	position: relative;
	display: flex;         
	align-items: center; 
	text-decoration: none;
}
.column-page .case-sidebar .column-tags__list li a::before{
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #D4533B;
	margin-right: 10px;
	flex-shrink: 0;
}

.column-page .case-sidebar .column-tags__list li a::after{
	content: "";
	position: absolute;
	left: 5px;
	top: 40%; 
	width: 6px;
	height: 6px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* ===========================================
 事例一覧（case　※taxonomyでも使用（タグページ）・事例一覧ページ（column）でも使用）
 * ======================================== */
.case-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/case/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.case-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.case-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}

.case-page .container_box{
	background:#F7F7F7;
}
.case-page .case-list_box{
	padding:0 1%;
	margin-top:8%;
}
.case-page .case-list_box a{
	text-decoration:none;
	color:black;
}
.case-page .case-list_box .case-list{
	background:#fff;
}
.case-page .case-list_box .case-list .case-title, .case-page .case-list_box .case-list .case-tags{
	width:92%;
	margin-left:auto;
	margin-right:auto;
}
.case-page .case-list_box .case-list .case-title{
	font-size:160% !important;
	margin:25px auto 50px auto;
}
.case-page .case-list_box .case-list .case-tags{
	font-size:90% !important;
	font-weight:bold !important;
	color:grey;
	text-align:right;
}

.case-page .case-filter {
	padding: 1% 0 3% 0;
}
.case-page .case-filter__grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(260px, 1fr));
	gap: 28px 46px; /* 縦, 横 */
	align-items: center;
	justify-items: stretch;
}
.case-page .case-filter__item{
	display: grid;
	grid-template-columns: 120px 1fr; /* ラベル幅 / セレクト幅 */
	gap: 16px;
	align-items: center;
	min-width: 0;
}
.case-page .case-filter__label{
	font-weight: 700;
	letter-spacing: .2em;
	white-space: nowrap;
}
.case-page .case-filter__selectWrap{
	position: relative;
}

.case-page .case-filter__select{
	width: 100%;
	padding: 14px 44px 14px 16px;
	background: #f3f3f3;
	border: 0;
	border-radius: 2px;
	font-weight: 600;
	color: #777;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-width: 0;
}

.case-page .case-filter__selectWrap::after{
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 3px solid #666;
	border-bottom: 3px solid #666;
	transform: translateY(-60%) rotate(45deg);
	pointer-events: none;
}
.case-page .case-filter__select:not(:has(option[value=""]:checked)){
	color:#000;
}
.case-page .case-filter__actions{
	display: flex;
	justify-content: center;
	margin-top: 26px;
}

.case-page .case-filter__btn{
	border: 0;
	background: #d6402f;
	color: #fff;
	font-weight: 700;
	padding: 14px 60px;
	cursor: pointer;
}

.case-page .case-thumb{
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	transition: box-shadow .3s ease, transform .3s ease;
}
.case-page .case-thumb::before{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(212, 83, 59, 0.55);
	opacity: 0;
	transform: scale(1.05);
	transition: opacity .35s ease, transform .45s ease;
	z-index: 1;
}
.case-page .case-thumb::after{
	content: "くわしくみる ＞";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	opacity: 0;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	white-space: nowrap;
	transition: opacity .35s ease, transform .35s ease;
	z-index: 2;
	pointer-events: none;
}
.case-page .case-thumb:hover::before{
	opacity: 1;
}
.case-page .case-thumb:hover::after{
	opacity: 1;
}
.case-page .case-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.case-page .case-title{
	display: -webkit-box;
	-webkit-line-clamp: 2;   /* ← 表示したい行数 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================
   Case Pagination
========================= */
.case-pagination{
	margin: 60px auto 0;
	text-align: center;
}
.case-pagination .page-numbers{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.case-pagination .page-numbers li{
	margin: 0;
}

/* =========================
   数字ページのみボタン化
========================= */
.case-pagination .page-numbers a.page-numbers:not(.prev):not(.next),
.case-pagination .page-numbers span.page-numbers.current{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 46px;
	height: 46px;
	font-size: 18px;
	font-weight: bold;
	border-radius: 4px;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
/* 通常数字 */
.case-pagination .page-numbers a.page-numbers:not(.prev):not(.next){
	color: #D4533B;
	background: #fff;
	border: 2px solid #D4533B;
}
/* hover */
.case-pagination .page-numbers a.page-numbers:not(.prev):not(.next):hover{
	background: #D4533B;
	color: #fff;
	transform: translateY(-2px);
}
/* 現在ページ */
.case-pagination .page-numbers .current{
	background: #D4533B;
	color: #fff;
	border: 2px solid #D4533B;
	cursor: default;
}

/* =========================
   前へ・次へ（囲まない）
========================= */
.case-pagination .page-numbers .prev,
.case-pagination .page-numbers .next{
	border: none;
	background: none;
	width: auto;
	height: auto;
	padding: 0;
	font-size: 16px;
	font-weight: bold;
	color: #D4533B;
}
.case-pagination .page-numbers .prev:hover,
.case-pagination .page-numbers .next:hover{
	text-decoration: underline;
	transform: none;
}



/*taxonomy限定　CSS*/
.taxonomy-page h2{
	line-height:1.5em !important;
}
.taxonomy-page h2 .small{
	color:black !important;
	font-size:80% !important;
}


@media (max-width: 1100px){
  .case-page .case-filter__grid{
	  grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 680px){
  .case-page .case-filter__grid{
    grid-template-columns: 1fr;
  }
  .case-page .case-filter__item{
    grid-template-columns: 110px 1fr;
  }
}
/* ===========================================
 事例詳細（single-case ※一部columnでも使用）
 * ======================================== */
.case-single, .column-single{
	background:#F7F7F7;
}
.case-single .container_box,.column-single .container_box{
	max-width:1200px;
	margin:auto;
}
.case-single h1{
	margin-top:7% !important;
	margin-bottom:10% !important;
}

.case-single .case-tags--top,.column-single .post-tags {
	margin-bottom: 10px;
	text-align:right;
}
.case-single .case-tag,.column-single .post-tag {
	display: inline-block;
	margin-right: 8px;
	margin-bottom: 6px;
	font-size: 14px;
	color: #7d7979;
	text-decoration: none;
}

.case-single .case-tag:hover,.column-single .post-tag:hover {
	text-decoration: underline;
}

.case-single .comment_title{
	display: inline-flex;
	align-items: center;
	gap: 20px;              
	font-weight: bold;
	margin: 40px auto 20px auto !important;
	padding-left:0 !important;
	position: relative;
	background-color:transparent !important;
}
.case-single .comment_title::before{
	content: "" !important;
	display: inline-block;
	width: 80px;
	height: 80px;
	background: url("images/fukidashi.png") no-repeat center / contain;
	flex-shrink: 0;
}
.case-single .data_box{
	width:96%;
	background:#fff;
	padding:1% 1% 6% 1%;
	border-radius:20px;
	margin:5% auto;
}
.case-single .data_box h2{
	background:transparent !important;
}
.case-single .data_box table{
	width:90%;
	margin:auto;
}
.case-single .data_box table th,.case-single .data_box table td{
	border-left:0;
	border-bottom:solid 2px #f6ad9d;
}

.case-single .case-gallery__item{
	margin:8% auto;
}

/*ーーーーボタン共通ーーーー*/
.case-single .button,.column-single .button,.complete-page .button{
	display: inline-block;
    padding: 18px 108px 18px 80px;
	margin:30px auto;
	background: #D4533B;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    position: relative;
}
.case-single .button::before,.column-single .button::before,.complete-page .button::before{
	content: "";
	position: absolute;
	right: 30px;
	top: 45%;
	width: 9px;
	height: 9px;
	border-top:solid 3px #D4533B;
	border-right: solid 3px #D4533B;
	transform: rotate(45deg);
	z-index: 2;
}
.case-single .button:after,.column-single .button:after,.complete-page .button:after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
.case-single .button:hover,.column-single .button:hover,.complete-page .button:hover{
	background:#e64e32;
}
/*詳細を聞くボタンのみ適用*/
.case-single .contact_button .button{
	color:#D4533B;
	background:#fff !important;
	border:solid 3px #D4533B;
	margin-top:8%;
}
.case-single .contact_button .button::before{
	border-top:solid 3px #fff;
	border-right: solid 3px #fff;
}
.case-single .contact_button .button:after{
	background: #D4533B;;
}
.case-single .contact_button .button:hover{
	opacity:0.8;
}

/*ーーーーぱんくずリストーーーー*/
.breadcrumb {
	font-size: 14px;
	margin: 20px 0;
	padding:0 !important;
	position: relative;
	left: calc((100vw - 1200px) / -3);
	background-color:transparent;
}
.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0;
	padding-inline-start: 0;
}
.breadcrumb li::after {
	content: ">";
	margin: 0 6px;
	color: #aaa;
}
.breadcrumb li:last-child::after {
	content: "";
}
.breadcrumb a {
	color: #666;
	text-decoration: none;
}
.breadcrumb a:hover {
	text-decoration: underline;
}

/*ーーーー通常投稿のsingleページでのみーーーー*/
.column-single .post-content{
	margin-top:50px;
	margin-bottom:5%;
}

@media screen and (max-width: 1199px) {
	.breadcrumb{
		left:0;
	}
}


/* ===========================================
 404ページ（404.php）
 * ======================================== */
.page-404 .fv{
	height:32vh;
	min-height:380px;
	background: url("images/company/fv_bg.jpg") no-repeat;
	background-size:cover;
	background-position:center;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.page-404 h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:200% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	padding:3% !important;
	border-radius:10px;
}
.page-404 h2 .small{
	font-size:70% !important;
	font-weight:bold !important;
}
.page-404 .text{
	margin-top:7%;
}

.page-404 .button{
	display: inline-block;
    padding: 18px 108px 18px 80px;
    background: #D4533B;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    position: relative;
	width:400px;
	max-width:100%;
	margin-top:50px;
}
.page-404 .button::before{
	content: "";
	position: absolute;
	right: 30px;
	top: 45%;
	width: 9px;
	height: 9px;
	border-top:solid 3px #D4533B;
	border-right: solid 3px #D4533B;
	transform: rotate(45deg);
	z-index: 2;
}

.page-404 .button:after{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}
.page-404 .button:hover{
	background:#e64e32;
}
.page-404 .container_box{
	max-width:1200px;
	margin:auto;
}


/* ===========================================
 お問い合わせ（contact）
 * ======================================== */
.contact-page .fv{
	height:32vh;
	min-height:380px;
	background: url("images/contact/fv_bg.jpg") no-repeat;
	background-size:cover;
	display: flex;
	justify-content: center; 
	align-items: center; 
}
/*親CSS対策で複雑なクラス設定*/
.contact-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
	width:40%;
	font-size:300% !important;
	border-bottom:none !important;
	background:rgba(255,255,255,0.8) !important;
	letter-spacing:.2em;
	line-height:1.5em;
	padding:3% !important;
	border-radius:10px;
}
.contact-page h2 .small{
	font-size:55% !important;
	font-weight:bold !important;
}

.contact-page .text{
	font-size:120% !important;
	font-weight:bold !important;
	line-height:2.0em !important;
}
.contact-page .line_button_box{
	margin-top:100px;
	margin-bottom:100px;
}
.contact-page .line_button_box .line_guide{
	font-size:90%;
	margin-bottom:30px;
	line-height:1.5em;
}
.contact-page .line_button{
	color:#fff !important;
	background:	#1FBF51;
	padding:20px 7%;
	max-width:100%;
	font-size:200% !important;
}
.contact-page .line_button:hover{
	text-decoration:none;
	opacity:0.8;
}
.contact-page .tel_button{
	color:#1FBF51 !important;
	padding:20px 7%;
	max-width:100%;
	font-size:200% !important;
	border-radius:40px;
	border:solid 3px #1FBF51;
	pointer-events: none;
}
.contact-page .tel_button:hover{
	text-decoration:none;
}
.contact-page .tel_guide{
	margin-top:25px !important;
}
.contact-page .contact_image{
	overflow-x:hidden;
}
.contact-page .contact_image img{
	width:100vw;
}
.contact-page .form_box{
	background:#F7F7F7;
}

.contact-page .form_box .box{
	width:90%;
	background:#fff;
	padding:3% 7%;
	margin:auto;
	margin-top:70px;
	border-radius:20px;
}


.contact-page .cform{
	margin:8% auto;
}
.contact-page .cform th{
	width:40%;
	padding:30px 0 30px 10px;
	font-size:18px;
	border-left:none;
	border-bottom:solid 2px #D7B8B6;
}
.contact-page .cform th p{
	font-weight:bold;
}
.contact-page .cform td{
	border-left:none;
	border-bottom:solid 2px #D7B8B6;
}
.contact-page input, .contact-page textarea{
	border:none;
	height:100%;
	outline: none;
	background:none;
	border:none;
}
.contact-page textarea{
	height:200px;
}
.contact-page textarea::placeholder {
	padding-top:10%;
}
.contact-page .policy{
	width:95%;
	height:200px;
	overflow-y:scroll;
	border:solid 0.5px #DAD3D2;
	padding:20px;
	margin:auto;
}
.contact-page .policy .policy_title{
	font-size:20px;
	margin-bottom:20px;
}
.contact-page .policy_check{
	text-align:center;
	margin:20px auto;
}
.contact-page .guide_box {
  width: 60%;
  margin: auto;
}


.required-srt{
	background-color:#B22A22;
	color:#FFF;
	font-size:12px;
	padding:5px;
	margin-left:30px;
	border-radius:5px;
}
.any-srt{
	background:#0276C3;
	color:#FFF;
	font-size:12px;
	padding:5px;
	margin-left:30px;
	border-radius:5px;
}
.submit_div{
	text-align:center;
}
.submit_wrap{
  position: relative;
  display: inline-block;
}

.submit_wrap input{
	width:380px;
	max-width:90%;
	appearance: none;
	-webkit-appearance: none;
	border: 3px solid #D4533B;
	border-radius: 999px;
	background: #fff;
	color: #D4533B;
	font-size: 20px;
	font-weight: 700;
	padding: 18px 90px 18px 60px;
	margin:50px auto 0 auto;
	letter-spacing: 0.4em;
	cursor: pointer;
}

.submit_wrap .arrow{
	position: absolute;
	right: 40px;
	top: 55%;
	width: 25px;
	height: 25px;
	background: #D4533B;
	border-radius: 50%;
	transform: translateY(-50%);
}
.submit_wrap .arrow::before{
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}
.submit_div input:hover{
	opacity:0.7;
}

.contact-page input[type="checkbox"] {
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid black;
	border-radius:2px;
	vertical-align: -5px;
	-webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}

.contact-page input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  content: '';
}
.contact-page label,.contact-page .wpcf7-list-item{
	width:100%;
	font-weight:normal;
}




/*=====================完了画面限定CSS=======================*/
.complete-page h3{
	margin-bottom:80px;
}
.complete-page .complete-text{
	font-size:100%;
	font-weight:bold;
	line-height:2.0em;
}
.complete-page .complete-text.red{
	font-size:90%;
	color:#cb0808;
	margin-top:50px;
}


/*タブレット横向き以下*/
@media screen and (max-width: 1199px) {
	.contact-page .cform {
		width: 70%;
		table-layout: fixed;
		border-collapse: collapse;
	}
	.contact-page .cform th,
	.contact-page .cform td {
		padding: 10px;
		vertical-align: top;
	}
	.contact-page .cform th{
		width: 40%;
		text-align: left;
		white-space: nowrap;
	}
	.contact-page .cform td {
		width: 60%;
	}
	
}
/*タブレット縦向き以下*/
@media screen and (max-width:991px){
	.contact-page .cform {
		width: 90%;
	}
	.contact-page .policy{
		width:90%;
	}
	.contact-page .guide_box {
		width: 80%;
	}
}
@media screen and (max-width:767px){
	.contact-page .text{
		width:90%;
	}
	.contact-page .policy .policy_title{
		font-size:18px;
	}
	.contact-page .cform th, .contact-page .cform td{
		width:100%;
		display:block;
	}
	.contact-page .cform th{
		text-align:center;
	}
	.contact-page .cform td{
		height:50px;
	}
	.contact-page .cform td.otoiawase{
		height:200px;
	}
	.contact-page input, .contact-page textarea{
		width:100%;
	}
	.submit_div input{
		width:80%;
	}
}


/* ===========================================
 フッター（footer）
 * ======================================== */
.footer {
  background: #D4533B;
  color: #fff;
  padding: 40px 5%;
  font-size: 14px;
}

.footer a {
  color: #fff !important;
  text-decoration: none !important;
}
.footer a:hover{
	opacity:0.8 !important;
}
.footer .title img{
	width:60%;
}
.footer .address{
	padding-left:5%;
}
.footer ul{
	margin-top:15px;
	border-left:solid 1px #fff;
}
.footer ul li{
	list-style:none;
	font-weight:bold;
}
.footer .case{
	border:solid 2px #fff;
	padding:5px 20px;
	border-radius:20px;
}
.footer .footer-copy{
	margin-top:60px;
}


/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}

/*media Queries タブレットサイズの横向き（〜1100px）以下で適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1100px) {
	header .side-menu{
		width:80px;
		height:80px;
		max-width:80px;
	}
	header .side-menu .item{
		font-size:70%;
	}
	header .side-menu .item img{
		width:30px;
	}
	.front .fv{
		padding-right:85px;
	}
	.front .fv .three-split{
		height:90vh;
	}
	.front .fv .three-split .midashi{
		left:30%;
	}
	.front .fv .three-split .midashi p{
		font-size:1.0em !important;
	}
	.front .fv .vertical-label{
		right:calc(105px - 140px);
	}
	
	.container_box,.front .case{
		padding:9% 85px;
	}
	.front .gaiyo h3{
		font-size:130% !important;
		margin:0 auto!important;
	}
	.front .gaiyo .submidashi{
		font-size:95% !important;
	}
	.front .gaiyo .text{
		font-size:100% !important;
	}
	.front .gaiyo .submidashi .concept_en,.front .case h3 .case_en,.front .select_menu h3 .select_menu_en{
		width:140px;
		top:-60px;
		left:-60px;
	}
	
	.front .strengths .strengths_box .title{
		font-size:130% !important;
	}
	.front .strengths .strengths_box .midashi{
		font-size:120% !important;
	}
	.front .strengths .strengths_box .text{
		font-size:100% !important;
	}
	.front .strengths .strengths_box .text_box{
		padding-top:0 !important;
	}
	.concept_en,.front .case h3 .case_en,.front .select_menu h3 .select_menu_en,.front .column .title .column_en{
		width:140px;
		top:-40px;
		left:-50px;
	}
	.front .case h3,.front .select_menu h3{
		font-size:180% !important;
	}
	
	.front .select_menu .title{
		font-size:130% !important;
	}
	
	.front .beginner h3{
		font-size:170% !important;
		line-height:2.0em !important;
	}
	.front .beginner .beginner_box .box a{
		font-size:100% !important;
	}
	
	.front .column .title{
		font-size:170% !important;
	}
	.front .case .button,.front .select_menu .button,.front .column .button{
		font-size:16px !important;
		width:380px;
	}
	
	.contact_cta h3{
		font-size:180% !important;
	}
	.contact_cta h3 span{
		width:140px;
		top:-40px;
		left:-50px;
	}
	.contact_cta .text{
		font-size:15px !important;
	}
	.contact_cta .button{
		font-size:16px !important;
	}
	
	
	/*商品ラインナップ*/
	.product-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	/*サービスページ*/
	.service-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	.service-page .achievements h3{
		font-size:170% !important;
	}
	.service-page .achievements .text{
		font-size:100% !important;
	}
	.service-page .achievements{
		min-height:80vh;
	}
	.service-page .gaiyo h3{
		font-size:130% !important;
	}
	.service-page .gaiyo .text{
		font-size:100% !important;
	}
	.service-page .gaiyo h3 .concept_en{
		width:140px;
		top:-40px;
		left:-50px;
	}
	.service-page .gaiyo .flex{
		margin:70px 0;
	}
	.service-page .gaiyo .text{
		margin:0 auto !important;
	}
	.service-page .gaiyo .flex .text_box .title{
		font-size:130% !important;
	}
	.service-page .roof-wrap h3{
		font-size:170% !important;
	}
	.service-page .select_menu .flex{
		margin:50px auto !important;
	}
	.service-page .achievements .button, .service-page .select_menu .button{
		font-size:11px !important;
		padding:10px 68px 10px 50px;
	}
	/*はじめての方へ*/
	.guide-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	/*料金・プラン*/
	.pricing-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	/*保障について*/
	.warranty-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	/*よくあるご質問*/
	.faq-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	/*ご利用の流れ*/
	.flow-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	
	/*事例一覧*/
	.case-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	.case-page .case-list_box .case-list .case-title{
		font-size:100% !important;
	}
	.case-page .case-list_box .case-list .case-tags{
		font-size:50% !important;
	}
	.case-page .case-filter__item{
		font-size:90% !important;
	}
	
	/*事例詳細*/
	.case-single .case-tag{
		font-size:90% !important;
	}
	.case-single .button, .column-single .button, .complete-page .button{
		font-size:16px !important;
	}
	.case-single .case-comment .comment_text{
		font-size:100% !important;
	}
	
	/*コラム・新着情報*/
	.column-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	
	/*お問い合わせ*/
	.contact-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	.contact-page .line_button_box{
		margin-top:70px;
		margin-bottom:70px;
	}
	.contact-page .line_button{
		font-size:150% !important;
	}
	.contact-page .tel_button{
		font-size:150% !important;
	}
	.contact-page .tel_guide{
		font-size:100% !important;
	}
	.contact-page .form_box .box{
		width:100%;
	}
	.contact-page .policy p:not(.contact-page .policy .policy_title){
		font-size:15px !important;
		font-weight:normal;
	}
	.contact-page .cform th{
		font-size:100% !important;
	}
	
	/*会社概要*/
	.company-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:50%;
		font-size:180% !important;
	}
	.company-page h3.title{
		font-size:180% !important;
	}
	.company-page .text{
		font-size:100% !important;
	}
	.company-page .message_image .text {
		width:55%;
		font-size:90% !important;
	}
	
	/*Footer*/
	.footer{
		padding:40px 2%;
	}
	.footer .left_area{
		width:23%;
	}
	.footer .right_area{
		width:70%;
	}
	
	.footer .address{
		font-size:70%;
	}
	.footer .title img{
		width:80%;
	}
	.footer h4{
		font-size:85%;
	}
	.footer ul li{
		font-size:65%;
	}
	.footer .case,.footer .company,.footer .sns{
		font-size:80%;
	}

}
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {
	.header{
		height:7vh !important;
	}
	.header .title img{
		width:95%;
	}
	.header .menu a{
		font-size:75%;
	}
	.header .tel{
		font-size:90% !important;
	}
	.header .tel span{
		font-size:75%;
	}

	.front .fv .three-split{
		height:50vh;
	}
	.front .fv .vertical-label{
		font-size:10px !important;
		top:82% !important;
		right:calc(105px - 110px);
	}
	
	
	.page-container{
		padding-top:7vh !important;
	}
	.front .gaiyo .submidashi,.front .column .title{
		margin-top:50px !important;
	}
	
	.service-page .achievements{
		min-height:60vh;
	}

	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {
	a[href^="tel:"]{
		pointer-events: none;
	}

	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {
	.page-container{
		padding-top:50px;
	}
	.container_box, .front .case{
        padding: 25% 3% 10% 3%;
    }
	
	.front .fv{
		padding-right: 0;
	}
	.front .fv .three-split{
		flex-direction: column;
		height: auto;
	}
	.front .fv .slide-track{
		display: flex !important;
		flex-direction: row !important;
	}
	.front .fv .left{
		flex: none;
		width: 100%;
		margin-right: 0;
		height: auto;
	}
	.front .fv .left .slide{
		 height: 60vh;
	}
	.front .fv .right{
		flex-direction: row;
		width: 100%;
		gap: 5px;
		height: 35vh; /* お好みで調整 */
	}
	.front .fv .top,
	.front .fv .bottom{
		flex: 1;
		height: 100%;
	}
	.front .fv .three-split .midashi{
		left: 50%;
		top: 78%;
	}
	.front .fv .three-split .midashi h2{
		font-size: 6vw !important;
	}
	.front .fv .three-split .midashi p{
		font-size: 1rem !important;
	}
	.front .fv .vertical-label{
		display: none;
	}
	
	.front .gaiyo .submidashi .concept_en, .front .case h3 .case_en{
		left:-20px;
	}
	.front .gaiyo .text{
		margin:30px auto 0 auto;
		font-size:90% !important;
		font-weight:normal !important;
	}
	.container_box.strengths_container_box{
		padding: 0 3% 10% 3%;
	}
	.front .strengths .strengths_box img{
		margin-top:30px;
	}
	.front .case{
		background-position:20px top;
		background-size:calc(100% - 10px) 100%;
	}
	.front .case .case_box{
		margin:40px auto 10px auto;
	}
	.front .case .button, .front .select_menu .button, .front .column .button{
		width:330px;
		margin-top:50px;
		font-size:13px !important;
	}
	.front .select_menu h3 .select_menu_en{
		left:0;
	}
	.front .select_menu .box{
		margin:20px auto;
	}
	.front .beginner{
		padding:8% 5%;
	}
	.front .beginner h3:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no):not(.st-matome):not(.rankh3):not(.post-card-title):not(#reply-title){
		font-size:120% !important;
		padding-top:65px !important;
	}
	.front .beginner h3::before{
		top:30px;
		left:35%;
		width:60px;
		height:60px;
	}
	.front .beginner .beginner_box .box{
		width:100%;
		margin:20px auto;
	}
	.front .beginner .beginner_box .box .image img{
		width:40%;
	}
	.front .column{
		padding:8% 5%;
	}
	.contact_cta{
		padding:20% 0 10% 0;
	}
	.contact_cta .button.left{
		margin-right:0;
	}
	.contact_cta .button.right{
		margin:0 auto 20px auto;
		margin-left:0;
	}
	
	
	/*会社概要*/
	.company-page .fv{
		min-height:300px;
	}
	.company-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	.company-page h3.title{
		font-size:120% !important;
	}
	.company-page .text{
		font-size:90% !important;
	}
	.company-page .table_box .box table,
	.company-page .table_box .box table tbody,
	.company-page .table_box .box table tr,
	.company-page .table_box .box table th,
	.company-page .table_box .box table td {
		display: block;
		width: 100%;
	}
	.company-page .table_box .box table th{
		background:rgba(246, 181, 161,0.1);
	}
	.company-page .table_box .box table th, .company-page .table_box .box table td{
		width:100%;
	}
	.company-page .message_image img{
		width:100%;
		margin-right:0;
	}
	.company-page .message_image{
		margin-top:40px;
	}
	.company-page .message_image .text{
		width:100%;
		position:static;
		margin-top:20px;
	}
	.company-page .company_map{
		margin-top:50px;
	}
	
	/*商品ラインナップ*/
	.product-page .fv{
		min-height:300px;
	}
	.product-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	
	/*サービスページ*/
	.service-page .fv{
		min-height:300px;
	}
	.service-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
		padding:3% 3% 6% 3% !important;
	}
	.service-page .achievements h3{
		font-size:120% !important;
	}
	.service-page .achievements .text{
		font-size:70% !important;
		margin:10px auto;
	}
	.service-page .gaiyo h3{
		font-size:100% !important;
	}
	.service-page .gaiyo .text:not(.service-page .gaiyo .flex .text){
		font-size:90% !important;
		font-weight:normal !important;
	}
	.service-page .gaiyo .flex .text{
		font-size:90% !important;
	}
	.service-page .gaiyo .flex img{
		margin-top:30px;
	}
	.service-page .roof-wrap{
		padding:0 3% 60px 3%;
	}
	.service-page .roof-wrap h3{
		font-size:130% !important;
	}
	.service-page .select_menu{
		padding:6% 3% 6% 3%;
	}
	.service-page .select_menu h3{
		font-size:170% !important;
	}
	.service-page .select_menu .flex .button{
		margin:10px auto;
	}
	/*ご利用の流れ*/
	.flow-page .fv{
		min-height:300px;
	}
	.flow-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	/*料金・プラン*/
	.pricing-page .fv{
		min-height:300px;
	}
	.pricing-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	
	/*保証について*/
	.warranty-page .fv{
		min-height:300px;
	}
	.warranty-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	
	/*よくある質問*/
	.faq-page .fv{
		min-height:300px;
	}
	.faq-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	
	/*コラム・新着情報*/
	.column-page .fv{
		min-height:300px;
	}
	.column-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	.case-layout{
		flex-direction: column-reverse;
	}
	.column-page .case-main,
	.column-page .case-sidebar{
		width: 100%;
	}
	.column-page .case-sidebar{
		margin-top:0;
	}
	
	/*事例一覧*/
	.case-page .fv{
		min-height:300px;
	}
	.case-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	.case-page .case-filter{
		padding:1% 5% 3%  5%;
	}
	.case-page .container_box{
		padding:15% 3% 10% 3%;
	}
	.case-page .case-filter__actions{
		margin-bottom:50px;
	}
	
	/*事例詳細*/
	.case-single .container_box, .column-single .container_box{
		padding:5% 3% 10% 3%;
	}
	
	/*404ページ*/
	.page-404 h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no) {
        width: 90%;
		font-size:180% !important;
    }
	.page-404 .container_box{
		padding:5% 3% 10% 3%;
	}
	.page-404 .text{
		font-size:100% !important;
	}
	.page-404 .button{
		width: 330px;
        font-size: 13px !important;
	}
	
	/*お問い合わせ*/
	.contact-page .fv{
		min-height:300px;
	}
	.contact-page h2:not([class^="is-style-st-heading-custom-"]):not([class*=" is-style-st-heading-custom-"]):not(.st-css-no){
		width:90%;
	}
	.contact-page .text{
		margin:auto;
		margin-bottom:20px;
		font-size:100% !important;
	}
	.contact-page .line_button_box{
		margin-top:40px;
		margin-bottom:50px;
	}
	.contact-page .line_button{
		padding:20px 15%;
		font-size:100% !important;
	}
	.contact-page .tel_button{
		padding:20px 15%;
		font-size:100% !important;
	}
	.contact-page .cform td{
		height:auto;
	}
	.contact-page .policy p:not(.contact-page .policy .policy_title){
		font-size:12px !important;
	}
	.contact-page label{
		font-size:14px !important;
	}
	.contact-page .submit_div input{
		width:300px;
		max-width:100%;
		font-size:16px !important;
	}
	
	/*フッター*/
	.footer .left_area{
		width:100%;
	}
	.footer .right_area {
		width:100%;
	}
	.footer .left_area .title{
		text-align:center;
	}
	.footer .address{
		width:70%;
		font-size:90% !important;
		line-height:1.5;
		margin:auto;
	}
	.footer .flex{
		flex-direction:row;
	}
	.footer .right_area .flex{
		margin-top:40px;
		padding-left:15px;
	}
	.footer .product,.footer .guide,.footer .contact,.footer .other{
		width:45%;
	}
	
	/*-- ここまで --*/
}