@charset "UTF-8";

/* INDEX */
/* -------------------------------------------------------------------
01.基本スタイル
02.パンくずおよびSNSボタンの設定(#breadSns)
03.メインビジュアル(#main_visual)
04.リード文(#lead)
05.Cool Cartの特長(#features)
06.Cool Cart導入ゴルフ場一覧(#list)
07.キャンペーンバナー掲載対応（#cpnBnr）
08.お客様の声掲載対応（#voice）
09.IE対応（フォントサイズ）
------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital@0;1&display=swap');



:root {
	--color-b1: #103366;
	--color-b2: #1977b3;
	--color-o1: #bc3f00;
	--color-o2: #ed800a;
}


/*------------------------------------------------------------------*/
/* 基本スタイル
/*------------------------------------------------------------------*/

#container{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 500;
	margin:0 auto;
	position:relative;
	text-align:center;
	width:100%;
}

#container a.anchor{
	display:block;
	margin-top:-100px;
	padding-top:100px;
}

/*clearfix*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	display: inline-table;
	min-height: 1%;
}
/*Hides from MacIE \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*Hides from MacIE */

.view-sp{
	display: none;
}
.animated{
	opacity: 0;
}

/* ########## responsive ########## */

@media(max-width:850px){
	.o850{
		display:none;
	}
}
@media(max-width:500px){
    .spNone{
        display:none;
    }
	.view-sp{
		display: block;
	}
}
/* ################################ */

/*------------------------------------------------------------------*/
/* 平和へのリンク設定(#heiwa)
/*------------------------------------------------------------------*/

#heiwa{
	text-align:center;
}
#heiwa a{
	display:inline-block;
	font-size:max(min(1.8vw,18px),14px);
	padding:20px 0 20px min(15vw,150px);
	position:relative;
}
#heiwa a:before{
	background:url(/cool_cart/img/logo_heiwa.svg) no-repeat;
	background-size:contain;
	content:'';
	display:inline-block;
	height:min(3vw,30px);
	left:0;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:min(13vw,130px);
}

/* ########## responsive ########## */

@media(max-width:500px){
	#heiwa a{
		padding:calc(20px + 6vw) 0 20px;
	}
	#heiwa a:before{
		height:min(6vw,30px);
		left:50%;
		position:absolute;
		top:15px;
		transform:translateX(-50%);
		width:min(26vw,130px);
	}
}
@media(max-width:400px){
	#heiwa a{
		padding:20px 10px 20px min(35vw,160px);
		text-align:left;
	}
	#heiwa a:before{
		height:min(6vw,30px);
		left:10px;
		top:50%;
		transform:translateY(-50%);
		width:min(26vw,130px);
	}
}

/* ################################ */


/*------------------------------------------------------------------*/
/* メインビジュアル(#main_visual)
/*------------------------------------------------------------------*/

#main_visual{
	aspect-ratio:673/385;
	background:url(../img/bg_pc.jpg);
	background-repeat:no-repeat;
	background-size:contain,cover;
	margin-bottom:140px;
	padding:0 0 150px 0;
	position:relative;
	text-align:left;
	width:100%;
}
#main_visual::after{
	content: "";
	display: block;
	aspect-ratio: 15/2;
	background:url(../img/mv_bottom_wave.svg) no-repeat;
	background-position:center;
	background-size:contain;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50% , 50%);
}
#main_visual h1{
	animation-duration: 2s;
	aspect-ratio:99/50;
	background:url(../img/airconcart_logo.svg) no-repeat;
	background-position:center;
	background-size:contain;
	margin:0 auto 1.5vw;
	opacity:0;
	position:absolute;
	right:5vw;
	text-indent:-9999px;
	top:3vw;
	width:35vw;
}

#main_visual ul{
	bottom:0;
	display:inline-block;
	position:absolute;
	top: 42%;
	right: 23vw;
	width: 40vw;
	text-align: center;
	transform: translateX(50%);
	text-shadow:
    1px  1px 0 #FFF,
   -1px  1px 0 #FFF,
    1px -1px 0 #FFF,
   -1px -1px 0 #FFF;
}
#main_visual li{
	color:#333333;
	font-size:clamp(0.9rem , 1.6vw , 2rem);
	font-weight: bold;
}
#main_visual li span.mv_t1{
	color: var(--color-b1);
	font-size:clamp(1rem , 1.9vw , 2.5rem);
	font-weight: bold;
}
#main_visual li span.mv_t2{
	color: var(--color-b2);
	font-size:clamp(1.3rem , 2.2vw , 2.9rem);
	font-weight: bold;
}
#main_visual li span.mv_t3{
	color: var(--color-b2);
	font-size:clamp(1rem , 1.9vw , 2.5rem);
	font-weight: bold;
}
#main_visual li span.mv_t4{
	color: var(--color-o1);
	font-size:clamp(1rem , 1.9vw , 2.5rem);
	font-weight: bold;
}
#main_visual li.mv_airconcart_txt{
	animation-duration: 2.5s;
	aspect-ratio:75/14;
	background:url(../img/mv_airconcart_text.svg) no-repeat;
	background-position:center;
	background-size:contain;
	text-indent:-9999px;
	margin-top: 0.5em;
	filter: drop-shadow(1px 1px 0 #FFF) drop-shadow(-1px  1px 0 #FFF)  drop-shadow(1px -1px 0 #FFF)  drop-shadow(-1px -1px 0 #FFF);
}

/* TVCM導線バナーのスタイル START */

#main_visual p.tvcm a{
	background:url(../img/bnr_cmmovie.png) no-repeat;
	background-size:contain;
	cursor:pointer;
	display:block;
	position:absolute;
	right:10vw;
	top:max(30vw,410px);
	width:min(26.7vw,360px);
	text-indent: -9999px;
	aspect-ratio: 75/17;
}
#main_visual p.tvcm a b{
	font-family:'Jost', sans-serif;
	font-size:min(2.67vw,36px);
	letter-spacing:0.1em;
	position:relative;
	top:2px;
}
#main_visual p.tvcm a>span:after{
	background-color:rgba(41,79,147,0.8);
	border:1px solid #FFF;
	border-radius:3px;
	content:'動画を見る';
	font-size:min(1.3vw,13px);
	left:5px;
	padding:3px 5px;
	position:relative;
	top:-6px;
}

#modal .buttons{
	color:#FFF;
	cursor:pointer;
	font-size:50px;
	font-weight:bold;
	position:absolute;
	right:10vw;
	top:-60px;
}
#modal video{
	left:50%;
	position:relative;
	top:50%;
	transform:translateX(-50%);
	width:70vw;
}
/* TVCM導線バナーのスタイル END */

/* ▼ PC・タブレット用（ワイプ自動再生） ▼ */

#main_visual p.tvcm_pc{
	border:2px solid #FFF;
	border-radius:10px;
	box-shadow:1px 1px 2px rgba(0,0,0,0.25);
	height:calc(25vw * 0.5626);
	overflow:hidden;
	position:absolute;
	right:10vw;
	bottom:0;
	width:25vw;
	z-index: 10;
}
#main_visual p.tvcm_pc a{
	cursor:pointer;
	display:block;
	position:relative;
	width: 100%;
	height: auto;
}
#main_visual p.tvcm_pc a>span{
	background:rgba(0,0,0,0.75);
	border-radius:10px;
	color:#FFF;
	display:none;
	height:max-content;
	left:50%;
	padding:10px 20px;
	position:absolute;
	text-align:center;
	top:45%;
	transform:translate(-50%);
	width:max-content;
}
#main_visual p.tvcm_pc a>span:before{
	background:url(/cool_cart/img/icon_expand.svg) no-repeat;
	background-size:contain;
	content:'';
	display:inline-block;
	height:16px;
	margin-right:10px;
	position:relative;
	top:3px;
	width:16px;
}
#main_visual p.tvcm_pc a:hover span{
	display:block;
}
#main_visual p.tvcm_pc video{
	height:auto;
	width:100%;
}

/* ▼ スクロール促進UI ▼ */

#main_visual a.scrollDown{
	color:#FFF;
	display:inline-block;
	font-size:13px;
	font-family:'Jost', sans-serif;
	left:50%;
	letter-spacing: .2em;
	line-height:1;
	bottom:10%;
	overflow:hidden;
	padding:10px 10px 110px;
	position:absolute;
	text-decoration:none;
	transform:translateX(-50%);
	z-index:2;
}
#main_visual a.scrollDown::after {
	background:#FFF;
	bottom:0;
	content:'';
	height:100px;
	left:50%;
	position:absolute;
	width:1px;
}
#main_visual a.scrollDown::before{
	background: rgba(255, 255, 255, .4);
	bottom: 0;
	content: '';
	height: 100px;
	left: 50%;
	position: absolute;
	width: 1px;
}
#main_visual a.scrollDown::after{
	animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}


/* ########## responsive ########## */

@media screen and (max-width:1500px){
}
@media screen and (min-width:1150px){
}
@media screen and (max-width:1149px) and (min-width:900px){
}
@media screen and (max-width:900px){
}
@media screen and (max-width:950px) and (min-width:769px){
}

@media screen and (max-width:830px){
	#main_visual{
		aspect-ratio:384/577;
		background:url(../img/bg_tab.jpg);
		background-position:left bottom,center;
		background-repeat:no-repeat;
		background-size:contain,cover;
		margin-bottom:30vw;
	}
	#main_visual h1{
		margin:0 auto;
		position:relative;
		right:inherit;
		width:75%;
	}
	#modal video{
		width:80vw;
	}
	#modal .buttons{
		right:5vw;
		top:-60px;
	}
	#main_visual ul{
		display:block;
		width:90%;
		top: 30%;
		right: 50%;
	}
	#main_visual li{
		font-size:clamp(0.85rem , 3.1vw , 2rem);
	}
	#main_visual li span.mv_t1{
		font-size:clamp(0.95rem , 3.9vw , 2.1rem);
		font-weight: bold;
	}
	#main_visual li span.mv_t2{
		font-size:clamp(1.3rem , 5.2vw , 2.9rem);
		font-weight: bold;
	}
	#main_visual li span.mv_t3{
		font-size:clamp(0.95rem , 3.9vw , 2.1rem);
		font-weight: bold;
	}
	#main_visual li span.mv_t4{
		font-size:clamp(0.95rem , 3.9vw , 2.1rem);
		font-weight: bold;
	}

	#main_visual li.mv_airconcart_txt{
		width: 94%;
		margin: 0.5em auto;
	}


	#main_visual a.scrollDown{
		display:none;
	}
	/* TVCM STRART */
	#main_visual p.tvcm_pc{
		height:28.125vw;
		right:50%;
		bottom:-23vw;
		width:50vw;
		transform: translateX(50%);
		aspect-ratio: 16/9;
		z-index: 100;
	}
	/* 大好評拡大コメント */
	#main_visual p.note{
		top:32vw;
	}
	#main_visual p.note a:hover:after{
		display:none;
	}
}
@media screen and (min-width:601px){
	#main_visual p.tvcm a{
		display:none;
	}
}
@media screen and (max-width:600px){
	#main_visual{
	/*	aspect-ratio:600/720;*/
		margin-bottom:33vw;
	}
	#main_visual h1{
	}

	/* TVCM START */
	#main_visual p.tvcm_pc{
		display:none;
	}
	#main_visual p.tvcm a{
		left:50%;
		position:absolute;
		right:inherit;
		top:unset;
		bottom: -30vw;
		transform:translateX(-50%);
		width:min(90vw,510px);
		z-index: 100;
	}
	#main_visual p.tvcm a b{
		font-size:min(6vw,36px);
	}
	#main_visual p.tvcm a>span:after{
		font-size:max(min(2vw,14px),10px);
		top:-3px;
	}
	#modal .buttons {
		font-size: 40px;
		right:5px;
		top:-60px;
	}
	/* TVCM END */

	#main_visual ul{
		height:inherit;
	}
	#main_visual li{
		/*font-size:max(min(3vw,18px),15px);*/
	}
	#main_visual li:nth-of-type(2){
		/*margin:5px 0 0 2.0em;*/
	}
}
@media screen and (max-width:500px){
	#main_visual ul{
		/*padding:16vw 3vw 0 0;
		text-align:right;*/
	}
	#main_visual li{
	}
}
@media screen and (max-width:400px){
	#main_visual ul{
	}
	#main_visual li{
		text-align:center !important;
	}
}


/* ################################ */



/*------------------------------------------------------------------*/
/* リード文(#lead)
/*------------------------------------------------------------------*/

#container #lead,
#container #lead2{
	color: #333;
	font-size:max(min(1.4vw,20px),13px);
	line-height:1.8;
	margin:-100px auto 50px;
	max-width:1000px;
	padding:100px 20px 0;
	position:relative;
	text-align:left;
	width:100%;
	z-index:10;
}
#container #lead a{
	border-bottom:1px dotted #333;
	color:#333;
	margin:0 5px;
}
#container #lead ul.note,
#container #lead2 ul.note{
	font-size:max(min(1.4vw,15px),12px);
	line-height:1.5em;
	margin-top:10px;
}
#container #lead ul.note li{
	text-indent: -1em;
	padding-left: 1em;
}

/* ########## responsive ########## */


@media screen and (max-width:830px){
	#container #lead,
	#container #lead2{
		font-size:max(min(2.17vw,18px),15px);
	}
}
@media screen and (max-width:450px){
	#container #lead,
	#container #lead2{
		font-size:max(min(3.56vw,16px),13px);
	}
}

/* ################################ */


/*------------------------------------------------------------------*/
/* 各項目の見出し
/*------------------------------------------------------------------*/

#container h2.arimi{
	color: var(--color-b1);
	font-size:clamp(1.5rem , 2.5vw , 3.2rem);
	font-weight: bold;
	position: relative;
	text-align: center;
}
#container h2.arimi::after {
    content: "";
    display: block;
    width: 130px;
    height: 3px;
    margin-top: 0.65em;
    background: linear-gradient(to right, var(--color-b2) 0 50%, var(--color-o2) 50% 100%);
	position: absolute;
	bottom: -0.1em;
	left: 50%;
	transform: translateX(-50%);
}

/*------------------------------------------------------------------*/
/* Cool Cartの特長(#features)
/*------------------------------------------------------------------*/

#features{
	display:block;
	margin-top:100px;
	overflow:hidden;
	position:relative;
	width:100%;
	margin-bottom: 100px;
}
#features ul{
	margin-top: 50px;
}
#features ul li{
	margin-bottom: 20px;
}
#features ul li .inner{
	display: flex;
}
#features ul li .inner img{
	width: 53vw;
	aspect-ratio: 7/5;
}
#features ul li .inner .point_txt{
	width: 47vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
#features ul li .inner .point_txt div{
	text-align: left;
}
#features ul li .inner .point_txt div h3{
	display: block;
	color: var(--color-b1);
	font-size:clamp(1rem , 1.9vw , 2.5rem);
	font-weight: bold;
}
#features ul li .inner .point_txt div p{
	display: block;
	font-size:clamp(0.7rem , 1.5vw , 1.2rem);
	margin-top: 1em;
}

#features .point01{
	background-color: #ffe3d7;
}
#features .point02{
	background-color: #efffdc;
}
#features .point03{
	background-color: #ececec;
}
#features .point04{
	background-color: #e5eeff;
}
#features .point05{
	background-color: #ffd4d7;
}

/* ==================================================
   スマホ表示用の切り替え（画面幅 768px 以下の設定）
   ================================================== */
@media screen and (max-width: 768px) {
	#features ul li .inner {
		/* 縦並びに変更 */
		flex-direction: column;
	}

	#features ul li .inner img {
		/* 画像を常に一番上に配置 */
		order: 1;
		width: 100%;
	}

	#features ul li .inner .point_txt {
		/* テキストを画像の下に配置 */
		order: 2;
		width: 100%;
		padding: 3em 2em; /* 上下に読みやすい余白を追加 */
		box-sizing: border-box;
	}

	#features ul li .inner .point_txt div h3 {
		/* スマホ向けに文字サイズを調整 */
		font-size: 1.2rem;
	}

	#features ul li .inner .point_txt div{
		width: 80vw;
		margin: 0 auto;
	}

	#features ul li .inner .point_txt div p {
		/* スマホ向けに文字サイズを調整 */
		font-size: 0.9rem;
	}

	#features .point_txt p br {
		display: none;
	}
	#features .point_txt p br.view-all {
		display: inline;
	}
}



/* ################################ */


/*------------------------------------------------------------------*/
/* キャンペーンバナー掲載対応（#cpnBnr）
/*------------------------------------------------------------------*/

#cpnBnr{
	margin:0 auto 50px;
	max-width:1000px;
	padding:0 10px;
	text-align:center;
	width:100%;
}
#cpnBnr img{
	width:100%;
}

/* ########## responsive ########## */

/*
@media screen and (min-width:599px){
	#cpnBnr img.sp{
		display:none;
	}
}
@media screen and (max-width:599px){
	#cpnBnr img.pc{
		display:none;
	}
}
*/

/* ################################ */


/*------------------------------------------------------------------*/
/* ご利用案内（#lead2）
/*------------------------------------------------------------------*/


#lead2{
	margin-bottom: 100px !important;
}
#lead2 ul{
	margin-top: 50px;
}
#lead2 ul li::before{
	content: "・";
}
#lead2 ul li span.note{
	text-indent: -1em;
	padding-left: 1em;
}

@media screen and (max-width:830px){
	#lead2 ul li{
		text-indent: -1em;
		padding-left: 1em;
	}
}



/*------------------------------------------------------------------*/
/* ゴルフ場リスト（#list）
/*------------------------------------------------------------------*/

#list .panel_area{
	margin-top: 50px;
}