@charset "UTF-8";

/*
Theme Name: tokaibiso
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.6
Requires PHP: 5.6.2
Version: 20250320.003
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/



@import url('./layout.css?20241209');



/* Variables */

:root {
	--color--gray: #444f5a;
	--color--gray02: #dddddd;
	--color--white: #ffffff;
	--color--footer: #fcf2e5;
	--color--nearwhite: #efefef;
	--color--black: #000000;
	--color--semiblack: #222222;
	--color--green: #92d050;
	--color--orange: #ed7d31;
	--color--blue: #1e90ff;
	--color--blue02: #105978;
	--color--blue03: #1F7EA7;
	--color--semiorange: #fdcd81;
	--color--darkorange: #cd5d11;
	--color--lightgray: #cccccc;
	--color--pink: #fe599e;
	--color--darkpink: #de397e;
	--color--bggreen: #ECF4D9;
	--color--bgpink: #FFF0F5;
	--color--bgorange: #fef3e5;
	--color--bgblue: #f0ffff;
	--global--admin-bar--height: 0px;
	--header--width: 30rem;
	--header--height: 100vh;
	--header--width--sp: 6.5rem;

	--font--eng: "Sansation", sans-serif;

	--contents--side: 3rem;

	--color--white-50: rgba(255, 255, 255, .5);
	--color--white-60: rgba(255, 255, 255, .6);
	--color--white-70: rgba(255, 255, 255, .7);
	--color--white-80: rgba(255, 255, 255, .8);
	--color--white-90: rgba(255, 255, 255, .9);
	
	--color--black-50: rgba(0, 0, 0, .5);
	--color--black-60: rgba(0, 0, 0, .6);
	--color--black-70: rgba(0, 0, 0, .7);
	--color--black-80: rgba(0, 0, 0, .8);
	--color--black-90: rgba(0, 0, 0, .9);
	
	--color--blue-70: rgba(30, 144, 255, .7);
	--color--blue-90: rgba(30, 144, 255, .9);
}

/* common -----------------------------------------------------------------------------------------------------------------------------------------------------------*/

html,body{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	overflow-x: hidden;
}
.sansation{ font-family: "Sansation", sans-serif; font-weight: 400; font-style: normal; }


img{ max-width: 100%; }


section{ position: relative; overflow: hidden; }



.anchor{ position: absolute; padding-top: 2rem; margin-top: -2rem; }

.wrapper{ padding-left: var(--header--width); width: calc(100%); min-height: var(--header--height); }



main{
	position: relative;
	overflow: hidden;
}

main::after{
	content: "TOKAI BISO";
	font-family: var(--font--eng);
	color: #fff;
    font-size: 10rem;
	text-shadow: 1px 0 0 var(--color--gray02), 0 1px 0 var(--color--gray02), -1px 0 0 var(--color--gray02), 0 -1px 0 var(--color--gray02);
	position: absolute;
    right: -26rem;
    bottom: 28.5rem;
	line-height: 0;
	transform: rotate( -90deg );
	z-index: -1;

}

main::before{
	content: "";
    transform: skewX(-15deg);
    width: 100px;
    height: 100%;
    margin: 0 auto;
    background-color: #fafafa;
    right: 10%;
    position: absolute;
    z-index: -1;
}


.title02 {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 3rem;
	font-weight: 900;
	margin-bottom: 2.2rem;
}
.title02:before {
	content: '';
	width: 2.5rem;
	left: 0;
	height: 100%;
	border-top: solid .4rem var(--color--blue02);
	margin-right: 1.4rem;
}



.page-title{ height: 20rem; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 0 0 0 2rem; }
.page-title .title{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; width: 100%; padding-left: var(--contents--side); font-size: 4.2rem; font-weight: 900; line-height: 1.2; }
.page-title .title span{ font-size: 2rem; line-height: 1; padding-left: .5rem; }

.contents{ padding: 3rem var(--contents--side) 10rem; }



.inner-mini{ max-width: 96rem; }


.dl-list dl{ display: flex; width: 100%; }
.dl-list dl *{ font-size: 1.4rem; }
.dl-list dl dt{ width: 15rem; border-top: var(--color--blue02) .1rem solid; padding: 2rem 1.5rem; color: var(--color--blue02); font-weight: 700; }
.dl-list dl dd{ width: calc(100% - 18rem); border-top: var(--color--gray02) .1rem solid; padding: 2rem 2.5rem; }
.dl-list dl:last-child dt{ border-bottom: var(--color--blue02) .1rem solid; }
.dl-list dl:last-child dd{ border-bottom: var(--color--gray02) .1rem solid; }


.contact-boxes{ margin-top: 5rem; }
.contact-boxes a{ display: flex; width: 30rem; height: 8rem; border: var(--color--blue02) 1px solid; justify-content: center; align-items: center; color: var(--color--blue02); font-weight: 700; justify-content: space-around; }
.contact-boxes a:hover{ color: var(--color--white); background-color: var(--color--blue02); }
.contact-boxes a::before{ content: ""; }

.upper-space{ margin-top: 5rem; }



.section-spacer{ margin-top: 7rem; }





.midashi{ font-size: 4rem; text-align: center; margin-bottom: 4rem; line-height: 1.2; }




/* header -----------------------------------------------------------------------------------------------------------------------------------------------------------*/

header{
	position: fixed;
	z-index: 1;
	width: var(--header--width);
	background-color: var(--color--white-90);
	height: var(--header--height);
	border-right: var(--color--gray02) .1rem solid;

}

header .header-inner{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(var(--header--height));
}

header .logo a{ text-align: center; padding: 4rem 2rem; display: block; }
header .logo img{ max-width: 100%; width: 100%; }


.header-top ul li{
	border-top: var(--color--gray02) .1rem solid;
}

.header-top ul li:last-child{ 
	border-bottom: var(--color--gray02) .1rem solid; }

.header-top ul li a{ display: flex; padding: 2rem; align-items: center; justify-content: space-between; }
.header-top ul li a:hover{ padding-right: 1.2rem; }
.header-top ul li a:hover,
.header-top ul li a:hover *{ color: var(--color--blue02); }

.header-top ul li.active a{ background-color: var(--color--blue02); color: var(--color--white); }
.header-top ul li.active a,
.header-top ul li.active a *{ color: var(--color--white) !important; }


.header-top ul li a span{ font-size: 1.6rem; transition: .5s; }
.header-top ul li a span span{ font-family: var(--font--eng); display: block; font-size: 1.1rem; font-weight: 700; }



.header-contact{ margin-top: 3rem; }
.header-contact a{ display: flex; flex-direction: column; height: 8rem; padding: 3rem 2rem; background-color: var(--color--blue03); cursor: pointer; position: relative; overflow:hidden; }
.header-contact a *{ color: var(--color--white); }
.header-contact a span.tel{ font-size: 3rem; text-align: center; font-weight: 700; }
.header-contact a span.tel i{ margin-right: .5rem; }
.header-contact a span.txt{ font-size: 1.4rem; text-align: center; }
.header-contact a:hover{ background-color: var(--color--blue02); }




	.header-contact a::before {
	content: "";			/* 文字は表示しないので中身無しを指定 */
	position: absolute;	/* ボタンの位置を基準に絶対値指定する */
	display: block;		/* 形式はblock */
	background: linear-gradient(to right,rgba(255,255,255,.7), rgba(255,255,255,0.5));
	/* 背景色は透明から白になるグラデーション */
	width: 20px;	/* 横幅 */
	height: 80px;	/* 縦幅 */
	top: -60px;	/* ボタン左上を基準に上へ60pxの位置 */
	left: -60px;	/* ボタン左上を基準に左へ60pxの位置 */
	/* アニメーションの動作指定 */
	animation-name:shine-run;	/* アニメーション名の指定 */
	animation-delay:1s;		/* アニメーションの開始時間指定 */
	animation-duration: 4s;	/* アニメーション動作時間の指定 */
	animation-timing-function: ease-in;
	/* アニメーションの動き指定（徐々に早く）*/
	animation-iteration-count: infinite;
	/* アニメーションの無限繰り返しの指定 */
	}
	/* ------------------------------------
	アニメーションのタイミングとボックスの
	拡大率、角度、透過率の指定
	------------------------------------*/
	@keyframes shine-run {
		0% {
		transform: scale(0) rotate(50deg);
		/* アニメ開始時は大きさ0、50度の傾き */
		opacity: 0;
		/* アニメ開始時は全透過 */
		}
		70% {
		transform: scale(1) rotate(50deg);
		/* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
		opacity: 1;
		/* 透過しない（しっかり表示される）ように1を設定 */
		}
		100% {
		transform: scale(250) rotate(50deg);
		/* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
		opacity: 0;
		/* 全透過になるようにして、徐々に消えるような変化を付ける */
		}
	}
	


















/*----- footer -----------------------------------------------------------------------------------------------------------------------------------------------------------*/

footer{ background-color: var(--color--gray); padding: 5rem 0 3.5rem; }
footer *{ color: var(--color--white) !important; }

footer .footer-inner{ padding: 0 2rem; }

footer .footer-upper{ display: flex; justify-content: space-between; margin-right: 2rem; }

footer .footer-upper .logo{ font-size: 2.8rem; font-weight: 700; }
footer .footer-upper .logo a{ display: block; }
footer .footer-upper .logo span{ display: block; font-size: 1.2rem; line-height: 1; }

footer .footer-upper .footer-company *{ font-size: 1.4rem; }
footer .footer-upper .footer-company .tit i{ display: inline-block; text-align: center; width: 2rem; margin-right: .5rem; }

footer .footer-upper .footer-company .head-office{ margin-bottom: 1.2rem; }

footer .footer-low{ margin-top: 4rem; padding-top: 1.2rem; border-top: var(--color--white-90) .1rem solid; display: flex; justify-content: flex-end; }
footer .footer-low *{ font-size: 1.4rem; }

footer .footer-low ul{ display: flex; margin-right: 1.5rem; }
footer .footer-low ul li:after{ content: "｜"; }
footer .footer-low ul li:last-child:after{ content: "｜"; }
footer .footer-low ul li a{ padding: 0 1.5rem; }
footer .footer-low ul li a span{ position: relative; }
footer .footer-low ul li a span::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: .1rem;
	background: var(--color--white);
	bottom: -.1rem;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .5s;
}
footer .footer-low ul li a:hover span::after { transform: scale(1, 1); transition: .5s; }


















.cover{
	
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.cover h1{
	width: 100%;
	background-color: var(--color--blue-90);
	color: var(--color--white);
	text-align: center;
	padding: 1.5rem;
	font-size: 3rem;
	font-weight: 900;
	font-style: italic;
}






.photo-box ul{ display: flex; flex-wrap: wrap; }
.photo-box ul li{ margin-bottom: .5%; display: inline-table; position: relative; }
.photo-box ul li span{ display: block; position: absolute; bottom: 0; left: 0; width: calc(100% - 2rem); padding: 1rem; font-size: 1.4rem; background: rgba(0,0,0, .5); font-weight: 700; color: var(--color--white); }









/* Top */
.contents-top{ padding: 3rem var(--contents--side) 5rem; }

.news-list dl dt{ text-align: center; }

.works-list{ display: flex; flex-wrap: wrap; }
.works-list a::before{ content: ""; padding-top: 100%; display: block; }
.works-list a img{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; object-fit: cover; }

.works-list a dl{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
.works-list a dl dd{ padding: 1rem 0; text-align: center; }




/* Compnay */
.company-wrapper .photo{ margin-bottom: 3rem; }




/*----- PrivacyPolicy -----*/

.privacy-box .privacy-inbox{ margin-top: 4rem; }
.privacy-box .privacy-inbox .index{ font-size: 2.4rem; font-weight: 700; margin-bottom: 1rem; }

.privacy-box p{ line-height: 2; }

.privacy-box .privacy-inbox ul{ margin-top: .8rem; }
.privacy-box .privacy-inbox ul *{ line-height: 2; }
.privacy-box .privacy-inbox ul li{ display: flex; }
.privacy-box .privacy-inbox ul li::before{
	content: "";
	width: .9rem;
	height: .9rem;
	display: flex;
	align-items: center;
	background: url('./assets/images/common/icon_li.png') no-repeat 50% 50% / .9rem auto;
	padding-top: 2.4rem;
    margin-right: 1rem;
}
.privacy-box .privacy-inbox ul li span{ width: calc(100% - 1.9rem); }

.privacy-box .privacy-inbox .second{ margin-top: 1.6rem; }

.privacy-box .privacy-inbox .sub{ margin-left: 2rem; }

.privacy-box .privacy-inbox dl{ display: flex; line-height: 2; }







.photo-box ul li::before {
	content: "";
	padding-top: 100%;
	display: block;
}
.photo-box ul li img {
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
}


.pager{ margin-top: 5rem; }

.wp-pagenavi{ display: flex; justify-content: center; }

.wp-pagenavi *{ width: 3.5rem; height: 4rem; display: flex; justify-content: center; align-items: center; line-height: 1; border-radius: 5rem; }

.wp-pagenavi i{ display: inherit !important; }





.button-articles{ margin-top: 4rem; }
.button-articles ul{ display: flex; justify-content: space-between; }

.button-articles ul li:not(:last-child){ margin-right: .1rem; }

.button-articles ul li{ width: 33.3%; }
.button-articles ul li a{ display: flex; width: 100%; justify-content: space-around; height: 6rem; align-items: center; }

.button-articles ul li a.l i{ margin-right: .8rem; }
.button-articles ul li a.p::before{ content: ""; }
.button-articles ul li a.n::after { content: ""; }


.button-articles ul li.ln{ background-color: var(--color--gray02); color: var(--color--white); border-radius: 5rem 0 0 5rem; }
.button-articles ul li.lp{ background-color: var(--color--gray02); color: var(--color--white); border-radius: 0 5rem 5rem 0; }

.button-articles ul li.ln a{ background-color: var(--color--blue03); color: var(--color--white); border-radius: 5rem 0 0 5rem; }
.button-articles ul li.ll a{ background-color: var(--color--blue02); color: var(--color--white); }
.button-articles ul li.lp a{ background-color: var(--color--blue03); color: var(--color--white); border-radius: 0 5rem 5rem 0; }





.flow {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 1.5rem;
  }
  
  .flow ul {
	padding: 0;
  }
  
  .flow li {
	list-style-type: none;
  }
  
  .flow dd {
	margin-left: 0;
  }
  
  .flow ul {
	position: relative;
  }
  .flow ul::before {
	content: "";
	width: 15px;
	height: 100%;
	background: #eee;
	margin-left: -129px;
	display: block;
	position: absolute;
	top: 0;
	left: 120px;
	border-radius: 20px;
  }
  .flow ul > li {
	position: relative;
  }
  .flow ul > li:not(:last-child) {
	margin-bottom: 60px;
  }
  .flow ul > li .icon03 {
	font-size: 0.8em;
	width: 2em;
	height: 2em;
	line-height: 2;
	text-align: center;
	font-weight: bold;
	border-radius: 100vh;
	color: #fff;
	background: var(--color--blue02);
	display: inline-block;
	margin-right: 0.3em;
  }
  .flow ul > li dl {
	padding-left: 3rem;
	position: relative;
  }
  
  .flow ul > li dl::before,
  .flow ul > li dl::after {
	content: "";
	display: block;
	position: absolute;
	top: 15px;
  }
  
  .flow ul > li dl::before {
	width: 7px;
	height: 7px;
	margin-top: -3px;
	background: var(--color--blue02);
	border-radius: 50%;
	left: -4px;
  }
  
  .flow ul > li dl::after {
	width: 1.5rem;
	border-bottom: 1px dashed var(--color--gray02);
	position: absolute;
	left: 5px;
  }
  
  .flow ul > li dl dt {
	font-size: 1.3em;
	font-weight: 600;
	color: var(--color--blue02);
	margin-bottom: 0.5em;
	display: flex;
	align-items: center;
  }




  .tel-box a{
	display: flex;
	flex-direction: column;
	max-width: 60rem;
	height: 10rem; 
		border: var(--color--blue02) 2px solid;
		justify-content: center;
		align-items: center;
		color: var(--color--blue02);
		font-weight: 700;
		position: relative;
		margin-top: 4rem;
}
.tel-box a::before{
	content: "";
    width: 20rem;
    height: 20rem;
    background: url(./assets/images/contact/icon_tel.svg) no-repeat 0 0 / 20rem auto;
    position: absolute;
    right: 0;
    top: -150px;
}
.mail-box a span.n,
.tel-box a span.n{
	
	font-size: 3rem;
}
.mail-box a span.n i,
.tel-box a span.n i{ margin-right: 1rem; }
.mail-box a{
	display: flex;
	flex-direction: column;
	max-width: 60rem;
	height: 10rem; 
		border: var(--color--blue02) 2px solid;
		justify-content: center;
		align-items: center;
		color: var(--color--blue02);
		font-weight: 700;
		position: relative;
		margin-top: 4rem;
}
.mail-box a::before{
	content: "";
    width: 15rem;
    height: 15rem;
    background: url(./assets/images/contact/icon_mail.svg) no-repeat 0 0 / 15rem auto;
    position: absolute;
    right: 0;
    top: -80px;
}
.mail-box a:hover,
.tel-box a:hover{
	color: var(--color--white);
	background-color: var(--color--blue02);
}

@media screen and (max-width: 970px){

	.tel-box a::before{
		content: "";
		width: 17rem;
		height: 17rem;
		background: url(./assets/images/contact/icon_tel.svg) no-repeat 0 0 / 17rem auto;
		position: absolute;
		right: 0;
		top: -128px;
	}
}



@media screen and (min-width: 1201px){
	.works-list a:nth-child(4){ display: none; }
	.works-list a{ width: 33%; position: relative; overflow: hidden; }
	
	.works-list a:nth-child(1) dl dd{ background-color: var(--color--black-70); width: 100%; color: var(--color--white); }
	.works-list a:nth-child(2) dl dd{ background-color: var(--color--white-90); width: 100%; color: var(--color--black); }
	.works-list a:nth-child(3) dl dd{ background-color: var(--color--black-70); width: 100%; color: var(--color--white); }

	.works-list a:not(:nth-child(3n)){ margin-right: .5%; }

	
	.works-lists{ display: flex; flex-wrap: wrap; }
	.works-lists a::before{ content: ""; padding-top: 100%; display: block; }
	.works-lists a img{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; object-fit: cover; }

	.works-lists a dl{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
	.works-lists a dl dd{ padding: 1rem 0; text-align: center; }

	.works-lists a{ width: 33%; position: relative; overflow: hidden; margin-bottom: .5%; }
	.works-lists a:not(:nth-child(3n)){ margin-right: .5%; }
	.works-lists a:nth-child(odd) dl dd{ background-color: var(--color--black-70); width: 100%; color: var(--color--white); }
	.works-lists a:nth-child(even) dl dd{ background-color: var(--color--white-90); width: 100%; color: var(--color--black); }


	.photo-box ul li{ width: 33%; position: relative; overflow: hidden; }

	.photo-box ul li:not(:nth-child(3n)){ margin-right: .5%; }

}






@media screen and (max-width: 1200px){
	.works-list a{ width: 49.5%; position: relative; overflow: hidden; }
	.works-list a:nth-child(1){ margin-bottom: 1%; margin-right: 1%; }
	.works-list a:nth-child(2){ margin-bottom: 1%; }
	.works-list a:nth-child(3){ margin-right: 1%; }
	.works-lists a:nth-child(odd){ margin-right: 1%; }
	.works-list a:nth-child(2n){ margin-right: 0; }
	
	.works-list a:nth-child(1) dl dd{ background-color: var(--color--black-70); width: 100%; color: var(--color--white); }
	.works-list a:nth-child(2) dl dd{ background-color: var(--color--white-90); width: 100%; color: var(--color--black); }
	.works-list a:nth-child(3) dl dd{ background-color: var(--color--white-90); width: 100%; color: var(--color--black); }
	.works-list a:nth-child(4) dl dd{ background-color: var(--color--black-70); width: 100%; color: var(--color--white); }

	
	.works-lists{ display: flex; flex-wrap: wrap; }
	.works-lists a::before{ content: ""; padding-top: 100%; display: block; }
	.works-lists a img{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; object-fit: cover; }

	.works-lists a dl{ width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
	.works-lists a dl dd{ padding: 1rem 0; text-align: center; }

	.works-lists a{ width: 49.5%; position: relative; overflow: hidden; margin-bottom: .5%; }
	.works-lists a:nth-child(odd){ margin-right: .5%; }
	.works-lists a:nth-child(1) dl dd,
	.works-lists a:nth-child(4) dl dd,
	.works-lists a:nth-child(5) dl dd,
	.works-lists a:nth-child(7) dl dd{ background-color: var(--color--black-70); width: 100%; color: var(--color--white); }
	
	.works-lists a:nth-child(2) dl dd,
	.works-lists a:nth-child(3) dl dd,
	.works-lists a:nth-child(6) dl dd,
	.works-lists a:nth-child(8) dl dd{ background-color: var(--color--white-90); width: 100%; color: var(--color--black); }



	.photo-box ul li{ width: 49.5%; position: relative; overflow: hidden; margin-bottom: .5%; }

	.photo-box ul li::before {
		content: "";
		padding-top: 100%;
		display: block;
	}
	.photo-box ul li img {
		width: 100% !important;
		height: 100% !important;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
	}
	.photo-box ul li:not(:nth-child(3n)){ margin-right: .5%; }


	.button-articles ul li a *{ font-size: 1.4rem; }

}


@media screen and (max-width: 1080px){

	footer .footer-upper{ flex-direction: column; }
	footer .footer-upper .logo{ margin-bottom: 1.5rem; }
}




@media screen and (max-width: 900px){

	header .logo img{ max-width: 19.5rem; }


	.title02{  font-size: 2rem; margin-bottom: 1.5rem; }

	.button-articles ul li a.l i{ margin-right: 0; }
	.button-articles ul li a.l span span{ display: none; }
	.button-articles ul li a.p::before,
	.button-articles ul li a.p span{ display: none; }
	.button-articles ul li a.n::after,
	.button-articles ul li a.n span { display: none; }


	/*+++++ Privacy Policy +++++*/
	.privacy-box .privacy-inbox dl *,
	.privacy-box .privacy-inbox ul li span,
	.privacy-wrapper p{ font-size: 1.4rem; }
	.privacy-box .privacy-inbox .index{ font-size: 2rem; margin-bottom: .5rem; }


	.privacy-box .privacy-inbox .sub{ margin-left: 0; }

	/*+++++ footer +++++*/
	footer{ padding: 3rem 0 1rem; }
	footer .footer-upper{ display: block; margin-right: 0; }
	footer .footer-upper .logo{ text-align: center; }

	footer .footer-company{ display: table; margin: 2rem auto 0; }

	footer .footer-low{ justify-content: center; margin-top: 2rem; }
	footer .footer-low *{ font-size: 1.2rem; }
	footer .footer-low ul{ display: none; }



	.contents{ padding: 3rem 1.5rem; }


	/*+++++ dl-list +++++*/
	.dl-list dl{ display: block; }
	.dl-list dl dt{ width: calc(100% - 1rem ); padding: 1rem .5rem; border-top: none; font-weight: 900; color: var(--color--blue02); font-size: 1.6rem; }
	.dl-list dl:last-child dt{ border-bottom: none; }
	.dl-list dl dd{ width: calc(100% - 1rem ); padding: 0rem .5rem 2rem; border-top: none; border-bottom: var(--color--gray02) .1rem solid;  }
	

	/*+++++ page-title +++++*/
	.page-title{ padding: 0 1.5rem; height: inherit; margin: 2rem 0; }
	.page-title .title{ padding-left: 0; font-size: 2.2rem; }
	.page-title .title span{ font-size: 1rem; }




	.section-spacer{ margin-top: 5rem; }


	header .logo a{ padding: 0; }

	header{ position: fixed; width: 100%; height: var(--header--width--sp); z-index: 99; background-color: var(--color--white); }

	header .header-inner{ min-height: auto; height: var(--header--width--sp); margin: 0; align-items: center; flex-direction: inherit; padding: 0 0 0 2rem; }



	header .logo{ color: var(--color--white); height: var(--header--width--sp); display: flex; align-items: center; }
	header .logo img{ height: calc(var(--header--width--sp) - 3.5rem); }

	header .menu{ display: none; }





	main{ padding-top: var(--header--width--sp); }



	.wrapper{ padding-left: 0; }



	.midashi{ font-size: 3rem; margin-bottom: 2rem; }









	.hamburger {
		display : block;
		position: fixed;
		z-index : 3;
		right : 0;
		top   : 0;
		width : var(--header--width--sp);
		height: var(--header--width--sp);
		cursor: pointer;
		text-align: center;
		background-color: var(--color--blue02);
	}

	.hamburger span {
		display : block;
		position: absolute;
		width   : calc(var(--header--width--sp) / 2);
		height  : 2px ;
		left    : calc(50% - calc(var(--header--width--sp) / 4));
		background : var(--color--white);
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition   : 0.3s ease-in-out;
		transition        : 0.3s ease-in-out;
	}
	.hamburger span:nth-child(1) { top: calc(50% - 1.2rem); }
	.hamburger span:nth-child(2) { top: calc(50% - .1rem); }
	.hamburger span:nth-child(3) { top: calc(50% + 1rem); }


	/* スマホメニューを開いてる時のボタン */
	.hamburger.active span:nth-child(1) {
		top: calc(50% - .2rem);
		-webkit-transform: rotate(-45deg);
		-moz-transform   : rotate(-45deg);
		transform        : rotate(-45deg);
	}
	.hamburger.active span:nth-child(2){
		opacity: 0;
	}
	.hamburger.active span:nth-child(3) {
		top: calc(50% - .2rem);
		-webkit-transform: rotate(45deg);
		-moz-transform   : rotate(45deg);
		transform        : rotate(45deg);
	}

	/* メニュー背景　*/
	.globalMenuSp {
		position: fixed;
		z-index : 99;
		top  : 0;
		left : 0;
		background: var(--color--white);
		text-align: center;
		width: 100%;
		margin-top: var(--header--width--sp);
		transform: scale(0,0);
		transition: all 0.6s;
		visibility: hidden;
		height: calc(100vh - var(--header--width--sp));
		opacity: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: auto;
	}
	.globalMenuSp ul {
		margin: 0 auto;
		padding: 0;
		width: calc(100% - 0);
	}

	

	.globalMenuSp ul li {
		list-style-type: none;
		padding: 0;
		width: 100%;
		transition: .4s all;
		border-top: var(--color--gray02) 1px solid;
	}

	.globalMenuSp ul li:last-child {
		padding-bottom: 0;
		border-bottom: var(--color--gray02) 1px solid;
	}
	
	.globalMenuSp ul li a span span{
		font-family: var(--font--eng);
		margin-left: 2rem;
		font-size:1.2rem;	}

	

	.globalMenuSp ul li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--color--blue02);
		padding: 2rem 1rem 2rem 2rem;
		text-decoration :none;
	}

	.globalMenuSp ul li:hover a,
	.globalMenuSp ul li.active a{
		color: var(--color--white) !important;
		background-color: var(--color--blue02);
	}


	

	/* クリックでjQueryで追加・削除 */
	.globalMenuSp.active {
		opacity: 1;
		visibility: visible;
		transform: scale(1,1);
	}





	.news-article-list, .contact-informbox{ padding: 0; }





	section.service .service-list a{ width: 100%; }

	section.service .service-list a:not(:last-child){ margin-bottom: 2rem; }









	.news-article-list a dl dd span{ font-size: 1.2rem; }









	section.news .news-list{ display: block; }



	section.news .news-list .news-list-news,

	section.news .news-list .news-list-blog{ width: 100%; background-color: var(--color--white); border: var(--color--lightgray) 1px solid; padding: 0 2rem; }



	.news-list-blog{ margin-top: 4rem; }



	section.news .news-list{ padding: 0; border: none; background-color: transparent; }

	section.news .news-list dl dt{ margin: 0 auto 3rem; text-align: left !important; line-height: 1; margin-bottom:0; }
	section.news .news-list a dl dd{ width: calc(100% - 3rem); padding: 0 1.5rem; }



	.service-box .inner{ margin: 0 1rem; }

	.service-inbox{ flex-direction: column; }



	.service-inbox .img{ width: 100%; }

	.service-inbox .contents{ width: 100%; margin-top: 2.5rem; }



	.service-02 .service-inbox{ flex-direction: column-reverse; }






	section.news .news-list.news-list-all .news-list-news .news-list-news-inbox{ display: block; }

	section.news .news-list.news-list-all .news-list-news .news-list-news-inbox a{ width: 100%; }

	section.news .news-list.news-list-all .news-list-news .news-list-news-inbox a:nth-child(odd){ margin-right: 0; }







	.company-information dl{ display: block; padding: 1.2rem; width: calc(100% - 2.4rem); }

	.company-information dl dt{ width: 100%; text-align: left; }

	.company-information dl dd{ width: calc(100% - 1rem); padding-left: 1rem; }



	section.message .catch{ font-size: 2rem; margin-bottom: 1.5rem; }

	section.message p{ font-size: 1.4rem; }



	section.main .cover h1 *{ font-size: 2.4rem; }




	.contact-boxes a{ width: 100%; height: 6rem; background-color: var(--color--white); }
.tel-box a::before{
	content: "";
	width: 17rem;
	height: 17rem;
	background: url(./assets/images/contact/icon_tel.svg) no-repeat 0 0 / 17rem auto;
	position: absolute;
	right: 0;
	top: -128px;
}
.mail-box a::before{
	content: "";
    width: 15rem;
    height: 15rem;
    background: url(./assets/images/contact/icon_mail.svg) no-repeat 0 0 / 15rem auto;
    position: absolute;
    right: 0;
    top: -80px;
}


.tel-box a{ margin-top: 9.5rem; font-size: 1.4rem; }
.mail-box a{ margin-top: 7.5rem; }

.mail-box a span.n, .tel-box a span.n{ font-size: 2rem; }

.tel-box a::before{
	content: "";
	width: 12rem;
	height: 12rem;
	background: url(./assets/images/contact/icon_tel.svg) no-repeat 0 0 / 12rem auto;
	position: absolute;
	right: 0;
	top: -91px;
}
.mail-box a::before{
	content: "";
    width: 10rem;
    height: 10rem;
    background: url(./assets/images/contact/icon_mail.svg) no-repeat 0 0 / 10rem auto;
    position: absolute;
    right: 0;
    top: -50px;
}


}





section.main .bg{ height: 100vh; }
section.main .bg .main-upper{ height: 50vh; display: flex; }
section.main .bg .main-under{ height: 50vh; display: flex; }

section.main .bg .main-upper div.b01{ width: 70%; border-right: var(--color--white) .4rem solid; }
section.main .bg .main-upper div.b02{ width: 30%; }


section.main .bg div img{ width: 100%; height: 100%; object-fit: cover; }

section.main .bg .main-under div.b01{ width: 33.333%; border-right: var(--color--white) .4rem solid; }
section.main .bg .main-under div.b02{ width: 33.333%; border-right: var(--color--white) .4rem solid; }
section.main .bg .main-under div.b03{ width: 33.333%;  }



.management-box01 .ph img{ width: 100%; }

.management-wrapper{ padding: 0 var(--contents--side) 10rem; }
.management-box02 .ph{ margin: 3rem 0; }
.management-box02 .ph img{ width: 100%; }


.management-box03 dl{ margin-top: 1.5rem; }
.management-box03 dl dt{ font-size: 2.2rem; }
.management-box03 dl dt span{ display: block; font-size: 1.4rem; }
.management-box03 dl dd{ margin-top: 1.5rem; }

.slider{ margin-top: 3rem; }
.slider img{ width: 100%; }
.slider .slick-prev{ left: 1rem; z-index: 1; }
.slider .slick-next{ right: 1rem; z-index: 1; }