@charset "utf-8";

/* bootstrap */
@import url("bootstrap4/bootstrap.min.css");

/* navi */
@import url("navi/navi.css");

/* pagetop */
@import url("pagetop/pagetop.css");

/* accordion */
@import url("accordion/accordion.css");

/* ページ内スムースリンク */
html {scroll-behavior: smooth;}
/* scroll-margin-top: 60px; */


.mw-1600 {max-width: 1600px;}
.mw-1200 {max-width: 1200px;}
.mw-1100 {max-width: 1100px;}
.mw-1000 {max-width: 1000px;}
.mw-800 {max-width: 800px;}
.mw-400 {max-width: 400px;}


.w-90px {width: 90px;}
.w-30 {width: 30%;}
.w-5 {width: 5%;}


.h-10vh {height: 10vh;}
.height-50 {height: 50px;}
.mt--100 {margin-top: -100px;}

.bg-orange-10 {background-color: rgba(235, 107, 3, 1);}
.color-orange-10 {color: rgba(235, 107, 3, 1);}


h1 {font-size: 1.5rem;}
.h3-line {
	border-top: solid 1px silver;
	border-bottom: solid 1px silver;
}
h5 {font-size: 2rem;}
.h5-company {
	font-size: 4rem;
	color: silver;
	font-weight: bold;
}

.f-30 {font-size: 3rem;}
.f-20 {font-size: 2rem;}
.f-15 {font-size: 1.5rem;}
.f-08 {font-size: 0.8rem;}
.f-07 {font-size: 0.7rem;}
.f-20-15 {font-size: 2rem;}
@media screen and (max-width: 575px) {
.f-20-15 {font-size: 1.5rem;}
}

.tel-font{
	font-size : 36px;
	text-align : center;
	color : navy;
}

.box-common {
	background-color: lightyellow;
	border-radius: 10px;
}

/* ボタン */
.button {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 180px;
	padding: 10px;
	cursor: pointer;
	line-height: 1.4;
	transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), transform 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
	color: navy;
	font-size: 1rem;
	border: solid 1px navy;
	border-radius: 10px;
	background: white;
}
.button:after,
.button:before {
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;
	width: 100px;
	height: 100px;
	content: '';
	transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
	-webkit-transform: translate(100%, -25%) translateZ(0);
	transform: translate(100%, -25%) translateZ(0);
	opacity: 0;
	border-radius: 50%;
}
.button:after,
.button:before {
	background: rgba(235, 107, 3, 1);
}
.button:hover {
	transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1);
	-webkit-transform: scale(1.1) translateZ(0);
	transform: scale(1.1) translateZ(0);
	color: navy;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.button:hover:before {
	transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
	-webkit-transform: translate3d(50%, 0, 0) scale(0.9);
	transform: translate3d(50%, 0, 0) scale(0.9);
	opacity: 0.15;
}
.button:hover:after {
	transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1) 0.05s, opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1) 0.05s;
	-webkit-transform: translate(50%) scale(1.1);
	transform: translate(50%) scale(1.1);
	opacity: 0.25;
}
.button:active {opacity: 0.5;}
.button:focus {color: silver;}
/* /ボタン */

/* nemu-line */
.menu-line li+ li {border-left: 1px solid dimgray;}
@media screen and (max-width: 768px) {
.menu-line li+ li {border-left: 0px;}
.menu-line li {
	width: 50%;
	float: left;
}
}
.menu-line li a {color: #333333;}
.menu-line li a:hover {
	color: orange;
	text-decoration: none;
}

/* キャンペーンラベル */
.label-campaign {
	position: relative;
}
.label-campaign::before{
   position: absolute;
   content: url(image/icon-campaign.png);
   top: 10vh;
   left: 0px;
}


/* トップ画像の部分 */


/* gride-top */
.grid-top {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	overflow: hidden;
	height: 80vh;
}
.grid-item-1:nth-child(1) {
	grid-row: 1/2;
	grid-column: 1/2;
}
.grid-item-1:nth-child(2) {
	grid-row: 1/2;
	grid-column: 1/2;
	height: 80vh;
}
.grid-item-1:nth-child(3) {
	grid-row: 1/2;
	grid-column: 1/2;
	height: 80vh;
	z-index: 1;
}

/* 回転 */
.rolling {animation: spin 15s linear infinite;}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}

/* 矢印促進 */
.grid-box-arrow {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	overflow: hidden;
}
.grid-item-arrow:nth-child(1),.grid-item-arrow:nth-child(2) {
	grid-row: 1/2;
	grid-column: 1/2;
}


/* 3つの特徴 */


.fadein {
	padding: 100px 0px;
	opacity : 0;
	transform : translate(100px, 0px);
	transition : all 1s;
}
.fadein.active{
	opacity : 1;
	transform : translate(0, 0);
}
.font-clamp-24-32 {font-size: clamp(1.5rem, 1.079rem + 2.11vw, 2rem);}


/* 各種割引 */


.w-45-100 {width: 45%;}
.w-10-100 {width: 10%;}
@media screen and (max-width: 768px) {
.w-45-100 {width: 100%;}
.w-10-100 {width: 100%;}
}

/* キャンペーンBOX */
.campaign {
	position: relative;
	padding: 15px;
	border: 3px solid silver;
	border-radius: 20px;
	background-color: rgba(235, 107, 3, 0.1);
}
.campaign:before {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: skew(-25deg);
	height: 15px;
	width: 15px;
	border-right: 3px solid silver;
	background-color: white;
	content: "";
}

/* さらにラベル */
.label-sarani {
	 position: relative;
}
.label-sarani::before{
	position: absolute;
	content: url(image/sarani.png);
	top: -10px;
	left: 40px;
	z-index: 1;
}


/* おすすめポイント */


/* 新幹線 */
.animation-train{
	animation-name: train;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@keyframes train{
	0%{margin-left:100%;}
	100%{margin-left:-100%;}
}
.h5-triangle {
    position: relative;
    margin-bottom: 0.2rem;
    padding: 1rem;
    /* 両端の三角形 */
    background: linear-gradient(135deg, #353535 0 10px, transparent 10px calc(100% - 10px), #353535 10px),
        linear-gradient(-135deg, #353535 0 10px, transparent 10px calc(100% - 10px), #353535 10px);
    color: #353535;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}	


/* FAQの部分 */


.faq-box {
	background-color: rgba(235, 107, 3, 0.1);
	border-radius: 10px;
}
.toggle-title {
	font-weight: bold;
	padding: 1rem 2rem 1rem 1rem;
	position: relative;
	cursor: pointer;
	cursor :pointer;
	transition: all 0.5s;
	border-radius: 5px;
	background-color: rgba(235, 107, 3, 0.1);
}
.toggle-title:hover {
	background: rgba(235, 107, 3, 0.2);
}
.toggle-title:after {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background:url(image/icon-triangle.svg) no-repeat right top;
	position:absolute;
	top: 50%;
	right: 7px;
	transform: translateY(-50%);
	transition: 0.2s;
}
.toggle-title.selected:after {
	transform: translateY(-50%) rotate(180deg);
	transition: 0.2s;
}
.toggle-txt {
	display: none;
}


/* お問合せの部分 */


/* タイトル飾り */
.sticker-decoration-1::before {content: url(image/decoration-1-l.svg); padding-right: 10px;}
.sticker-decoration-1::after {content: url(image/decoration-1-r.svg); padding-left: 10px;}

/* mail-animation */
.mail-animation-i-2 {
	background: url(image/contact-2-mai-anime.svg) no-repeat;
	width: 80px;
	height: 80px;
	animation: mail-i-2 2s steps(2) infinite;
}
@keyframes mail-i-2 {
	to {background-position: -160px 0;}
}

/* tel-animation */
.tel-animation-icon {
	background: url(image/contact-2-tel-anime.svg) no-repeat;
	width: 80px;
	height: 80px;
	animation: tel-i-2 2s steps(4) infinite;
}
@keyframes tel-i-2 {
	to {background-position: -320px 0;}
}

/* 仕切り線 */
.border-r {border-right: solid 1px silver}
.border-b {border-bottom: none;}
@media screen and (max-width: 768px) {
.border-r {border-right: none;}
.border-b {border-bottom: solid 1px silver}}


/* footerの部分 */


/* grid-footer */
.grid-box-footer {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 2fr;
}
@media screen and (max-width: 768px) {
.grid-box-footer {display:block;}
}
.grid-item-footer:nth-child(1) {
	grid-row: 1/2;
	grid-column: 1/2;
}
.grid-item-footer:nth-child(2),.grid-item-footer:nth-child(3) {
	grid-row: 1/2;
	grid-column: 2/3;
}

/* footer font */
.bg-footer {background: linear-gradient(#bde3f9, #1cb5e0 );}
h2 {font-size: clamp(0.875rem, -0.125rem + 5vw, 1.75rem);}
.h2-p {font-size: clamp(0.75rem, 0.464rem + 1.43vw, 1rem);}


/* landing.html */


/* 30000 */
.box-30000 {
	background: url(image/30000-b.png) center/contain no-repeat;
	background-color: #eb6b03;
	overflow: hidden;
}
.animation-duration-5 {animation-duration: 5s;}

/* キャンペーンBOX */
.campaign {
	position: relative;
	padding: 15px;
	border: 3px solid silver;
	border-radius: 20px;
	background-color: rgba(235, 107, 3, 0.1);
}
.campaign:before {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: skew(-25deg);
	height: 15px;
	width: 15px;
	border-right: 3px solid silver;
	background-color: white;
	content: "";
}

/* キャンペーン文字の調整 */
.linear-yellow {
	font-size: 2rem;
	background: linear-gradient(transparent 80%, yellow 20%);
}
.f-30-20 {font-size: 3rem;}
@media screen and (max-width: 575px) {
.f-30-20 {font-size: 2rem;}
}

/* 3つのメリット */
.w-33-50 {width: calc(100% / 3);}
.w-33-100 {width: calc(100% / 3);}
.f-15-10 {font-size: 1.5rem;}
/* 3つ目の画像 */
.w-100-50 {width: 100%;}
@media screen and (max-width: 768px) {
.w-33-50 {width: calc(100% / 2);}
.w-33-100 {width: calc(100% / 1);}
.w-100-50 {width: 50%;}
.f-15-10 {font-size: 1rem;}
}

/* テキスト上のドット */
.text-emphasis {text-emphasis: circle #879cad;}


/* company.html */


/* gride-company */
.grid-box-company {
	display: grid;
	grid-template-rows: 200px 300px 50px;
	grid-template-columns: 1fr;
}
@media screen and (max-width: 768px) {
.grid-box-company {
	display:block;
}
}
.grid-item-company:nth-child(1) {
	grid-row: 2/4;
	grid-column: 1/2;
}
.grid-item-company:nth-child(2) {
	grid-row: 1/3;
	grid-column: 1/2;
	z-index: 1;
}
.company-box {
	max-width: 500px;
	background: linear-gradient(rgb(189, 227, 249,0.1), rgb(28, 181, 224,0.9) );
}

/* オレンジのアンダーライン */
.linear-orange {
	font-size: 1.3rem;
	background: linear-gradient(transparent 90%, rgba(235, 107, 3, 1) 10%);
}

.h5-box {background-color: rgba(255, 255, 255, 0.5);}

/* 画像ドット */
.is-layer-dot {
	position: relative;
	  &:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: "";
		display: block;
		background-color: rgba(0, 0, 0, .2);
		background-image: radial-gradient(#000 10%, transparent 0);/* 円形グラデーション 開始色,終了色 */
		background-size: 3px 3px;
	}
}

.grid-item-company hr {border: solid 1px lavender;}

/* 表のアンダーライン */
table tr td {border-bottom: 1px solid lavender;}


/* mail.html */


/* mailのラジオボタンの枠 */
.label-hover{
	padding-top : 7px;
	padding-bottom : 7px;
	width : 100%;
	border: 1px solid silver;
	border-radius: 5px;
	background-color: #ffffff;
	text-align : center;
}
	
input[type="radio"]{
	display: none;
}
	
input[type="radio"]:checked + label{
	background: #dcdcdc;
	color: #000000; 
}
/* mailのラジオボタンの枠 */

/* labelの色 */
.mail-label-bg {background-color: lavender;}
/* 文頭の矢印 */
.mail-label-bg::before {
	content: "";
	display: inline-block;
	content: url("image/icon-mail-arrow-2.svg");
	vertical-align: middle;
	padding-right: 5px;
}
/* 必項マーク */
.mark-required {
	color: white;
	background-color: darkorange;
	padding: 0px 5px;
	margin-right: 8px;
	border-radius: 7px;
}