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

/* ------------------------------
	 共通
------------------------------ */
html { font-size: 22px; line-height: 1.9; }
a { transition: 0.7s; }
a:hover { opacity: 0.6; }
img { max-width: 100%; }

@media screen and (max-width:768px){
	html { font-size: 18px; }
	a:hover { opacity: 1; }
}

/* float */
.cf { overflow: hidden; }
.fLeft { float: left; padding-right: 20px; padding-bottom: 20px; }
.fRight { float: right; padding-left: 20px; padding-bottom: 20px; }

@media screen and (max-width:768px){
	.fLeft { float: none; padding: 0; margin: 10px 0; }
	.fRight { float: none; padding: 0; margin: 10px 0; }
}

p { font-family: "A1ゴシック M", sans-serif; color:#616161; font-feature-settings: "palt"; letter-spacing: 0.06em;  }

/* margin */
.mt15 { margin-top: 15px; }

/* PC */
.pc { display: block !important; }
.sp { display: none !important; }

/* SP */
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

hr { height: 0; margin: 0; padding: 0; border: 0; }

.dot_line { display: flex; width: 1024px ; max-width: 90%; margin: auto; padding: 10px; background: url("../images/dot_line.png") no-repeat center; background-size: contain; }

.dot_line_cp { display: flex; width: 1024px ; max-width: 98%; height: 60px; margin: auto; padding: 40px 0 0; background: url("../images/cp/cp_dotline.png") no-repeat center; background-size: contain; }
@media screen and (max-width:768px) {
	.dot_line_cp { display: flex; width: 100% ; max-width: 98%; height: 20px; margin: auto; padding: 40px 0 0; background: url("../images/cp/cp_dotline_sp.png") no-repeat center; background-size: contain; }
}

/* contents */
.contentsOuter { max-width: 1100px; padding: 0 40px; margin: 0 auto; }
.contentsLOuter { max-width: 1200px; padding: 0 40px; margin: 0 auto; }
.contentsLLOuter { width: 100%; padding: 0; margin: 0 auto; }
.commonSec { margin-top: 0; overflow: hidden; }
.commonSec h2 + div { margin-top: 40px; }

@media screen and (max-width:768px){
	.contentsOuter,
	.contentsLOuter { padding: 0 10px; }
	.commonSec { margin-top: 0px; }
	.commonSec h2 + div { margin-top: 15px; }

}

/* flex */
.flexList { display: flex; justify-content: center; }

/* display */
.displayNone { display: none; }

/* ------------------------------
	 コンテンツ
------------------------------ */
/* MV */
#mvSec { height: 760px; background: url("../images/mv_bg.png") no-repeat center top #aadee8; background-size: cover ; padding-top: 50px; }
#mvSec h1 { height: 680px; margin-bottom: 20px; text-align: center; }
#mvSec h1 img { max-height: 680px; text-align: center; object-fit: scale-down; }
#mvSec ul.flexList { margin-top: 5px; }
#mvSec ul.flexList li { border-right: solid 1px #bb89bb; flex: 1; text-align: center; }
#mvSec ul.flexList li:last-child { border-right: none; }
#mvSec ul.flexList li a { display: block; }
#mvSec ul.flexList li a:hover { opacity: 1; }
#mvSec ul.flexList li a img { transition: 0.7s; }
#mvSec ul.flexList li a:hover img { filter: hue-rotate(40deg) saturate(180%); }

#mvSec .contentsLLOuter {
	position: relative;
	padding-bottom: 0;
}
#mvSec .contentsLLOuter .car-jutai {
	position: absolute;
	bottom: 0;
	object-fit: contain;
}

#mvSec .btn_cp {
	position: absolute;
	width: 120px;
	max-width: 98%;
	top: 600px;
  	right: 0;
  	bottom: 0;
  	left: 300px;
	margin: auto;
}

.updown {
	animation-name:UpDown;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	}

@keyframes UpDown{
	0% {
	transform: translateY(0);
	}
	100% {
	transform: translateY(16px);
	}
	}

@media screen and (min-width:769px) and (max-width:1480px) {
	#mvSec .contentsLLOuter .car-jutai img {
		width: 1480px;
		max-width: 100%;
		height: 140px;
		object-fit: cover;
	}
}

@media screen and (max-width:768px){
	#mvSec { width: 100%; height: 100%; margin: 0; padding: 0; background: none; }
	#mvSec h1 { width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; }
	#mvSec h1 img { width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; object-fit: cover; }
	#mvSec ul.flexList li a:hover img { filter: hue-rotate(0deg) saturate(100%); }

	#mvSec .btn_cp {
		position: absolute;
		width: 16%;
		max-width: 98%;
		top: 35%;
		  right: 0;
		  bottom: 0;
		  left: 32%;
		margin: auto;
	}
}
@media screen and (max-width:430px){
	#mvSec .btn_cp {
		position: absolute;
		width: 16%;
		max-width: 98%;
		top: 38%;
		  right: 0;
		  bottom: 0;
		  left: 32%;
		margin: auto;
	}
}
@media screen and (max-width:375px){
	#mvSec .btn_cp {
		position: absolute;
		width: 16%;
		max-width: 98%;
		top: 40%;
		  right: 0;
		  bottom: 0;
		  left: 32%;
		margin: auto;
	}
}


/* #secconcept */
#secconcept { margin: 40px auto; padding: 10px; text-align: center; }
#secconcept hr { margin: 40px auto; padding: 10px; text-align: center; }
#secconcept h2 { width: 670px; margin: 10px auto 50px; font-size: 2.4em; color: #F45C82; font-family: "A1ゴシック B"; }
#secconcept dl { width: 940px; margin: 30px auto 20px; display: flex; flex-wrap: wrap;}
#secconcept dt { width: 600px; margin: auto; padding: 20px 40px 0 0;}
#secconcept dd { width: 240px; margin: auto; padding-right: 10px;}
#secconcept p { font-size: 1.36em; text-align: left; }
#secconcept span.color1 { color: #538bcc; }
#secconcept span.color2 { color: #9f5f9f; }

.accordion-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 60px;
    margin: 0 auto;
    display: block;
}

.accordion-toggle-open {
    margin: 0 auto 30px; /* 上部の開くボタンに余白 */
}

.accordion-toggle-close {
    margin: 40px auto 20px; /* 下部の閉じるボタンに上部余白を多め */
    display: none; /* 初期非表示 */
}

.accordion-concept {
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
}

@media screen and (max-width: 768px) {
    .accordion-toggle {
        width: 50px; /* スマホでは少し小さく */
        margin: 15px auto;
    }

    .accordion-toggle-close {
        margin: 30px auto 40px; /* スマホで下に余裕を持たせる */
    }

    #secconcept dl {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #secconcept dt,
    #secconcept dd {
        width: 100%;
        padding: 10px;
        margin: 0;
    }

    #banner {
        padding: 10px;
    }

    /* 画像やバナーがはみ出さないように */
    #banner img {
        max-width: 100%;
        height: auto;
    }
}

@media screen and (max-width:768px){
    #secconcept { margin: 30px auto; padding: 0px; }
    #secconcept hr { margin: 16px auto; padding: 10px; text-align: center; }
    #secconcept h2 { width: 74%; margin: 5px auto 1px; font-size: 1.8em; }
    #secconcept dl { width: 100%; margin: 30px auto 20px; display: flex; flex-wrap: wrap;}
    #secconcept dt { width: 90%; display: flex; justify-content: center; margin: auto; padding: 2px 64px; font-size: 1.16em;}
    #secconcept dd { width: 90%; margin: auto; padding: 40px 40px 0;}
    #secconcept p { font-size: 0.72em; }
    #secconcept p { font-size: 0.72em; }
    .accordion-toggle {
        width: 40px;
        margin: 20px auto;
    }
}
@media screen and (max-width:375px){
    #secconcept p { font-size: 0.68em; }
}

/* #banner */
#banner { width: 100%; margin: 50px auto 0; padding: 20px 0; background-color: #fff; }
#banner_cp { width: 100%; margin: 60px auto 0; padding: 20px 0; background-color: #fff; }
.bannerSec { width: 880px; max-width: 92%; margin: 30px auto; padding: 0;}

.bannerSec .bannerArea > ul > li { position: relative; margin-bottom: 5px; }
.bannerSec .bannerArea > ul > li ul { position: absolute; left: 0; right: 0; text-align: center;  margin: 0 auto; display: flex; }
.bannerSec .bannerArea > ul > li.line ul { max-width: 54%; right: 6%; bottom: 15%; }
.bannerSec .bannerArea > ul > li.xtw ul { max-width: 100%; left: 63%; bottom: 26%; text-align: right; }
.bannerSec .bannerArea > ul > li.xtw ul li { max-width: 70%;}

@media screen and (max-width:768px){
    #banner { width: 100%; margin: 0px auto 20px; padding: 0px 0; background-color: #fff; }
    #banner_cp { width: 100%; margin: 20px auto 0; padding: 10px 0 0; background-color: #fff; }
}


/* #sec01 sec02 */
#sec01,
#sec02 { margin-bottom: 30px; padding-bottom: 30px; text-align: center; color: #616161; }
#sec01 h2,
#sec02 h2 { margin: 30px auto; z-index: 10; }

#sec01 { margin-top: 33px; }
#sec01 ul.flexList { margin-top: 35px; padding-bottom: 20px; }
#sec01 ul.flexList li { margin: 0 30px; }
#sec01 ul.flexList li p { padding-top: 10px; font-size: 88%; line-height: 1.5; }

#sec02 { margin-top: 30px; }
#sec02 p { width: 84%; margin: 50px auto;}
#sec02 ul.flexList { margin-top: 30px; }
#sec02 .jutaiimg { width: 96%; margin: 30px auto 0; }


@media screen and (max-width:768px){
	#sec01,
	#sec02 { margin-bottom: 10px; padding-bottom: 10px; }
	#sec01 .contentsOuter,
	#sec02 .contentsOuter { padding: 0 20px; }
	#sec01 ul.flexList { margin-top: 15px; }
	#sec01 ul.flexList li { width: 100%; margin: 0 1%; }
	#sec01 ul.flexList li p { font-size: 0.48em; }
	#sec02 p { width: 74%; margin: 10px auto;}
}

ul.flog {
	display: flex; flex-wrap: wrap; justify-content: center;
	width: 1100px; max-width: 100%;
	margin: 0 auto 0; padding: 0 0;
}
#sec01 .flog li {
	width: 160px; max-width: 100%;
	margin: 0 0 -30px; padding: 0;
}
#sec02 .flog li {
	width: 540px; max-width: 100%;
	margin: 0 0 -30px; padding-left: 35%;
}

@media screen and (max-width:768px){
	#sec01 .flog li {
		width: 30%; max-width: 30%;
		margin: 0 0 -30px; padding: 0;
	}
	#sec02 .flog li {
		width: 56%; max-width: 56%;
		margin: 0 0 -30px; padding-left: 35%;
	}
}

.sub-title {
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 0;
}
.sub-title span {
  display: block;
  transition: transform 1.2s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: translate3d(0, 100%, 0);
}
.sub-title span.scroll-in {
  transform: translate3d(0, 0, 0);
}

/*アニメーション要素のスタイル*/
.animation {
	opacity : 1;
	visibility: hidden;
	transition: 0.9s;
	transform: translateY(90px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active1 {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* 共通アコーディオンヘッダー */
.accordion-headersec {
    max-width: 1000px;
    margin: 30px auto;
    border-radius: 999px;          /* とても丸い角丸（帯っぽく） */
    overflow: hidden;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 1.14rem;
    font-weight: 500;
    padding: 5px 10px 5px 100px;
    cursor: pointer;
    user-select: none;          /* テキスト選択を防ぐ（クリックしやすく） */
    -webkit-tap-highlight-color: transparent; /* スマホのタップハイライトを消す（見た目綺麗に） */
}


.accordion-headersec .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 30px;            /* 上下左右の余白調整はお好みで */
    pointer-events: none; /* 内側要素のpointer-eventsを無効化 */
}

.accordion-headersec .title-images {
    flex: 1;
    text-align: center;
}

.accordion-headersec .title-images img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.accordion-headersec .title-images img.sp {
    display: none;
}

@media screen and (max-width: 768px) {
  .accordion-headersec {
    max-width: 1000px;
    margin: 30px auto;
    border-radius: 999px;          /* とても丸い角丸（帯っぽく） */
    overflow: hidden;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 1.14rem;
    font-weight: 500;
    padding: 2px 2px 2px 20px;
    cursor: pointer;
}
    .accordion-headersec .title-images img.pc {
        display: none;
    }
    .accordion-headersec .title-images img.sp {
        display: block;
        max-width: 90%;
    }
    .accordion-headersec .header-inner {
        padding: 10px 10px;
    }
}

/* sec01専用スタイル（ピンク） */
#sec01 .accordion-headersec {
    background-color: #f45c82;
}

/* sec02専用スタイル（紫） */
#sec02 .accordion-headersec {
    background-color: #9f5f9f;
}

/* トグルボタン */
.accordion-togglesec {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 40px;                   /* ボタン画像の幅に合わせて調整 */
    height: 40px;                  /* 高さも画像に合わせる */
    flex-shrink: 0;
}
@media screen and (max-width: 768px) {
.accordion-togglesec {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 30px;                   /* ボタン画像の幅に合わせて調整 */
    height: 30px;                  /* 高さも画像に合わせる */
    flex-shrink: 0;
}
}

.accordion-togglesec img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* アコーディオンコンテンツ本体 */
.accordion-contentsec {
    transition: max-height 0.4s ease-out;
    overflow: hidden;
}

/* 必要に応じてコンテンツのマージン調整 */
#sec01 .accordion-contentsec ul.flexList {
    margin-top: 35px;
    padding-bottom: 20px;
}

#sec02 .accordion-contentsec p {
    width: 84%;
    margin: 50px auto 0;
}
@media screen and (max-width: 768px) {
  #sec01 .accordion-contentsec ul.flexList {
    margin-top: 20px;
    padding-bottom: 20px;
}
  #sec02 .accordion-contentsec p {
    width: 84%;
    margin: 20px auto 0;
}
}

#sec02 .accordion-contentsec .jutaiimg {
    width: 96%;
    margin: 30px auto 40px;
}





/* #campaign */
#campaign { width: 100%; margin: 50px auto 0; padding: 60px 0 40px; background-color:#AADEE8; }
#campaign2 { width: 100%; margin: 0px auto 0; padding: 60px 0 40px; background-color:#7bccdb; }
.campaignSec { width: 1040px; max-width: 96%; margin: 30px auto; padding: 0;}
.campaignSec .parkArea { width: 990px; max-width: 96%; margin: 50px auto; padding:40px 0;}
.campaignSec .parkArea h2 { margin: 0px auto 30px; }
.campaignSec .parkArea h3 { width: 434px; max-width: 100%; margin-top: 30px; }

.campaignSec ul.select_park { display: flex; flex-wrap: wrap; width: 100%; margin: 20px auto 80px; justify-content:center; align-items:center;  }
.campaignSec ul.select_park li { width: 26%; margin-top: 2%; margin-right: 1.5%;  }
.campaignSec ul.select_park li img { width: 74%; margin: 1%;  }
.campaignSec ul.select_park li:last-child { width: 26%;}
.campaignSec ul.select_park li a { border-radius: 10px; background-color: #fff; transition: .2s; box-shadow: 2px 2px 0px 2px #91BDC5; display: flex; width: 100%; margin: auto; padding: 20px 0; justify-content:center; align-items:center; font-size: 1.24em; color: #F45C82; font-family: "A1ゴシック B",sans-serif; line-height: 1.18; text-decoration: none; }
.campaignSec ul.select_park li a:hover { box-shadow: none; transform: translate3d(0, 3px, 0); }

.campaignSec .parkFlow { width: 100%; border-radius: 30px; margin: 50px auto; padding: 50px 0;  background-color: #D5EEF3; }
.campaignSec .parkFlow h3 { width: 250px; margin: -80px auto 50px; }
#campaign2 .campaignSec .parkFlow h3 { width: 70%; margin: -80px auto 50px; }
.campaignSec .parkpark { width: 930px; max-width: 98%; margin: 30px auto; padding: 0; }
.campaignSec .parkpark p.parktencion { font-size: 0.6em; padding-left: 18px; color: #9f5f9f; line-height: 1.4; }
.campaignSec .parkpark p.parkcotion { font-size: 0.6em; padding-left: 18px; line-height: 1.4; }
.campaignSec .parkpark h4 { margin-top: 0; padding-top: 10px; }
.campaignSec .parkpark h4#hamaotu { width: 614px; max-width: 100%; }
.campaignSec .parkpark h4#nagaoka { width: 322px; max-width: 100%; }
.campaignSec .parkpark h4#times { width: 356px; max-width: 100%; }
.campaignSec .parkpark h4#iongojo { width: 356px; max-width: 100%; }
.campaignSec .parkpark h4#ionkatsura { width: 356px; max-width: 100%; }
.campaignSec .parkpark h4#ionkyoto { width: 356px; max-width: 100%; }
.campaignSec .parkflex1 { display: flex; flex-wrap: wrap; justify-content:space-between; width: 100%; max-width: 100%; height: 195px; margin: 20px 0 5px; }
.campaignSec .parkflex2, .parkflex3, .parkflex4, .parkflex5, .parkflex6 { display: flex; flex-wrap: wrap; justify-content:space-between; width: 100%; max-width: 100%; height: 166px; margin: 20px 0 10px; }
.parkflex1 img, .parkflex2 img, .parkflex3 img, .parkflex4 img, .parkflex5 img, .parkflex6 img { max-width: 100%; }

.campaignSec .parkflex1 li:nth-child(1) { max-width: 100%; width: 265px; }
.campaignSec .parkflex1 li:nth-child(2) { max-width: 100%; width: 462px; }
.campaignSec .parkflex1 li:nth-child(3) { max-width: 100%; width: 190px; }
.campaignSec .parkflex1 li:nth-child(4) { width: 100%; max-width: 100%; }
.campaignSec .parkflex1 li:nth-child(4) p { max-width: 10px 0; padding: 10px 0 0 18px; font-size: 0.6em; line-height: 1.2; color: #9f5f9f; }

.campaignSec .parkflex2 li:nth-child(1) { max-width: 100%; width: 165px; }
.campaignSec .parkflex2 li:nth-child(2) { max-width: 100%; width: 595px; }
.campaignSec .parkflex2 li:nth-child(3) { max-width: 100%; width: 168px; }

.campaignSec .parkflex3 li:nth-child(1) { max-width: 100%; width: 251px; }
.campaignSec .parkflex3 li:nth-child(2) { max-width: 100%; width: 263px; }
.campaignSec .parkflex3 li:nth-child(3) { max-width: 100%; width: 240px; }
.campaignSec .parkflex3 li:nth-child(4) { max-width: 100%; width: 164px; }

.campaignSec .parkflex4 li:nth-child(1) { max-width: 100%; width: 200px; }
.campaignSec .parkflex4 li:nth-child(2) { max-width: 100%; width: 560px; }
.campaignSec .parkflex4 li:nth-child(3) { max-width: 100%; width: 160px; }

.campaignSec .parkflex5 li:nth-child(1) { max-width: 100%; width: 200px; }
.campaignSec .parkflex5 li:nth-child(2) { max-width: 100%; width: 560px; }
.campaignSec .parkflex5 li:nth-child(3) { max-width: 100%; width: 160px; }

.campaignSec .parkflex6 li:nth-child(1) { max-width: 100%; width: 200px; }
.campaignSec .parkflex6 li:nth-child(2) { max-width: 100%; width: 560px; }
.campaignSec .parkflex6 li:nth-child(3) { max-width: 100%; width: 160px; }

.campaignSec .quoArea > ul > li { position: relative; margin-bottom: 5px; }
.campaignSec .quoArea > ul > li ul { position: absolute; left: 0; left: 0; text-align: center;  margin: 0 auto; display: flex; }
.campaignSec .quoArea > ul > li.line ul { max-width: 35%; left: 10%; bottom: 23.5%; }

@media screen and (max-width:768px) {
	#campaign { width: 100%; margin: 50px auto 0; padding: 30px 0 10px; background-color:#AADEE8; }
  #campaign2 { width: 100%; margin: 0px auto 0; padding: 20px 0; background-color:#7bccdb; }
	.campaignSec .parkArea { width: 990px; max-width: 96%; margin: 10px auto 20px; padding:20px 0 20px;}
  .campaignSec .parkArea h2 { margin: 0px auto 10px; }
	.campaignSec .parkArea h3 { width: 64%; max-width: 100%; margin-top: 30px; }

  .campaignSec ul.select_park { display: block; width: 100%; margin: 20px auto 10px; justify-content:center; align-items:center;  }
	.campaignSec ul.select_park li { width: 99%; margin:5% 1% 5% 0; }
	.campaignSec ul.select_park li a {transition: .2s;  border-radius: 6px; background-color: #fff;  box-shadow: 2px 2px 0px 2px #91BDC5; display: flex; margin: auto; padding: 10px 0; font-size: 1.04em; color: #F45C82; line-height: 1.10;  }
	.campaignSec ul.select_park li a:hover { box-shadow: none; transform: translate3d(0, 3px, 0);}
	.campaignSec ul.select_park li:last-child { width: 99%; margin-right: 0%;}
	
	.campaignSec .parkFlow { width: 96%; border-radius: 20px; margin: 0 auto; padding: 30px 0;  background-color: #D5EEF3; }
	.campaignSec .parkFlow h3 { width: 40%; margin: 0 auto 10px; }
	#campaign2 .campaignSec .parkFlow h3 { width: 100%; margin: -50px 0 20px 5px; }
	.campaignSec .parkpark { width: 94%; max-width: 94%; margin: 0 auto; padding: 0; }
	.campaignSec .parkpark p.parktencion { font-size: 0.48em; padding-left: 4px; color: #9f5f9f; }
	.campaignSec .parkpark p.parkcotion { font-size: 0.48em; margin-left: 4px; padding-top: 2px; padding-left: 1em; text-indent: -1em; line-height: 1.4; }
	.campaignSec .parkpark h4 { margin-top: 0; padding-top: 0; }
	.campaignSec .parkpark h4#hamaotu { width: 90%; max-width: 100%; }
	.campaignSec .parkpark h4#nagaoka { width: 48%; max-width: 100%; }
	.campaignSec .parkpark h4#times { width: 52%; max-width: 100%; }
	.campaignSec .parkpark h4#iongojo { width: 52%; max-width: 100%; }
	.campaignSec .parkpark h4#ionkatsura { width: 52%; max-width: 100%; }
	.campaignSec .parkpark h4#ionkyoto { width: 52%; max-width: 100%; }
	
	.campaignSec .parkflex1, .campaignSec .parkflex2, .campaignSec .parkflex3, .campaignSec .parkflex4, .campaignSec .parkflex5, .campaignSec .parkflex6 { display: block; width: 100%; height: auto; margin: 10px 0 5px; }

	.campaignSec .parkflex1 li:nth-child(8) { width: 100%; }
	.campaignSec .parkflex1 li:nth-child(8) p { max-width: 10px 0; margin-left: 4px; padding-top: 5px; padding-left: 1em; text-indent: -1em; font-size: 0.52em; line-height: 1.4; color: #9f5f9f; }

	.campaignSec .arrow { max-width: 4%; width: 4%; height: 24px; margin: 0 auto; padding: 0 47%; line-height: 1.1; }
	
	.campaignSec .quoArea .quoFlow { width: 90%; border-radius: 10px; margin: 20px auto 0; padding: 5% 3%;  background-color: #fff;}
	.campaignSec .quoArea .quoFlow h4 { width: 40%; margin: 10px auto 10px; padding: 5% 3%;}
	.campaignSec .quoArea p.quocotion { font-size: 0.52em; padding-top: 2px; padding-left: 1em; text-indent: -1em; line-height: 1.4; }
	.campaignSec .quoArea p.quocotion1 { font-size: 0.52em; padding-top: 5px; padding-left: 1em; text-indent: -1em; line-height: 1.4; color: #E60000; }
}


/* howto */
#howto { width: 100%; margin: 0 auto 0; padding: 80px 0; background-color:#c8f0ff; }
.howtoSec { width: 1040px; max-width: 96%; margin: 30px auto; padding: 0;}
.howtoSec h2 { width: 980px; max-width: 100%; margin-top: 30px; }
.howtoSec .howtomsg { width: 940px; margin: auto; display: flex; justify-content: space-between; }
.howtoSec h3 { width: 64%; margin: 50px auto 80px; text-align: center; }
.howtoSec .howtomovie { width: 30%; margin: 50px auto 80px; padding: 0 20px; text-align: center; }
.howtoSec .howtoFlow { width: 100%; border-radius: 30px; border: 1px #f45c82 solid; box-shadow: 8px 8px #f45c82; margin: 50px auto; padding: 50px 0; background-color: #fff; }
.howtoSec .howtoFlow2 { width: 100%; border-radius: 30px; border: 1px #f45c82 solid; box-shadow: 8px 8px #f45c82; margin: 50px auto; padding: 50px 0; background-color: #fff; }
.howtoSec h4 { width: 60%; font-size: 1.40em; margin: 30px auto; padding: 10px 100px; text-align: center; }
.howtoSec p { width: 80%; font-size: 1.20em; margin: 30px auto 60px; text-align: center; font-weight: 500;  color: #f45c82; }

@media screen and (max-width:768px) {
#howto { width: 100%; margin: 0 auto 0; padding: 20px 0; background-color:#c8f0ff; }
.howtoSec h2 { width: 980px; max-width: 90%; margin: 10px auto; }
.howtoSec .howtomsg { width: 940px; max-width: 96%; margin: auto; display: block; justify-content: space-between; }
.howtoSec h3 { width: 85%; font-size: 0.96em; margin: 30px auto; text-align: center; font-weight: 500;  color: #616161; }
.howtoSec .howtomovie { width: 80%; margin: 50px auto 80px; padding: 0 20px; text-align: center; }
.howtoSec .howtoFlow { width: 94%; border-radius: 20px; border: 1px #f45c82 solid; box-shadow: 4px 4px #f45c82; margin: 30px auto; padding: 10px 0; background-color: #fff; }
.howtoSec .howtoFlow2 { width: 94%; border-radius: 20px; border: 1px #f45c82 solid; box-shadow: 4px 4px #f45c82; margin: 30px auto; padding: 10px 0; background-color: #fff; }
.howtoSec h4 { width: 90%; font-size: 1.40em; margin: 10px auto; padding: 10px; text-align: center; }
.howtoSec p { width: 70%; font-size: 0.90em; margin: 20px auto 30px; text-align: center; font-weight: 500;  color: #f45c82; }
}

.accordion-container.pc { width: 90%; margin: 10px auto 30px; display: flex !important; border: 2px solid #bb89bb; border-radius: 12px; overflow: hidden;}

.accordion-container2.pc {
	width: 60%;
	margin: 10px 0 30px 50px;
  display: flex !important;
  border: 2px solid #bb89bb;
  border-radius: 12px;
  overflow: hidden;
}

.accordion-container3.pc {
	width: 60%;
	margin: 10px 0 30px 50px;
  display: flex !important;
  border: 2px solid #bb89bb;
  border-radius: 12px;
  overflow: hidden;
}

@media screen and (max-width:768px) {
	.accordion-container.pc {display: none !important;}
	.accordion-container2.pc {display: none !important;}
	.accordion-container3.pc {display: none !important;}
	.accordion-container.sp { width: 90%; margin: 10px auto 20px; display: flex !important; border: 1px solid #bb89bb; border-radius: 8px; overflow: hidden;}
	.accordion-container2.sp { width: 90%; margin: 10px auto 20px; display: flex !important; border: 1px solid #bb89bb; border-radius: 8px; overflow: hidden;}
	.accordion-container3.sp { width: 45%; margin: 10px 0 20px 5%; display: flex !important; border: 1px solid #bb89bb; border-radius: 8px; overflow: hidden;}
}

/* 各カラム */
.accordion {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #b47cc0;
}
.accordion:last-child {
  border-right: none;
}

@media screen and (max-width:768px) {
	.accordion { width: 40%; display: flex; flex-wrap: wrap; flex-direction: column; border-right: 1px solid #b47cc0;}
}

.howtoSec .spot {width: 42%;}
.howtoSec .spot1 {width: 32%; margin-left: 6%;}

@media screen and (max-width:768px) {
	.howtoSec .spot {width: 46%;}
.howtoSec .spot1 {width: 32%; margin-left: 8%;}
}

/* 共通トグルは非表示 */
#all-toggle {
  display: none;
}

/* 共通トグルは非表示 */
#two-toggle {
  display: none;
}

/* 共通トグルは非表示 */
#three-toggle {
  display: none;
}

/* タイトル部 */
.accordion-header { display: flex; justify-content: space-between; align-items: center; background: #9f5f9f; color: #fff; font-size: 1.14rem; font-weight: 500;
  padding: 10px 10px 10px 100px;
  cursor: pointer;
}
.accordion-header .icon {
  width: 16px;
  height: 16px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-header .icon::before {
  transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-header2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #9f5f9f;
  color: #fff;
  font-size: 1.14rem;
  font-weight: 500;
  padding: 10px 10px 10px 100px;
  cursor: pointer;
}
.accordion-header2 .icon {
  width: 16px;
  height: 16px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-header2 .icon::before {
  transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-header3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #9f5f9f;
  color: #fff;
  font-size: 1.14rem;
  font-weight: 500;
  padding: 10px 10px 10px 100px;
  cursor: pointer;
}
.accordion-header3 .icon {
  width: 16px;
  height: 16px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-header3 .icon::before {
  transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    transition: transform .3s;
}

@media screen and (max-width:768px) {
	.accordion-header { display: flex; justify-content: space-between; align-items: center; background: #9f5f9f; color: #fff; font-size: 1.00rem; font-weight: 500; padding: 5px 10px 5px 45px; cursor: pointer;}
	.accordion-header2 { display: flex; justify-content: space-between; align-items: center; background: #9f5f9f; color: #fff; font-size: 1.00rem; font-weight: 500; padding: 5px 10px 5px 45px; cursor: pointer;}
	.accordion-header3 { display: flex; justify-content: space-between; align-items: center; background: #9f5f9f; color: #fff; font-size: 1.00rem; font-weight: 500; padding: 5px 10px 5px 40px; cursor: pointer;}

	.accordion-header .icon {
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-header .icon::before {
  transform: translateY(-25%) rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    transition: transform .3s;
}

	.accordion-header2 .icon {
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-header2 .icon::before {
  transform: translateY(-25%) rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    transition: transform .3s;
}

	.accordion-header3 .icon {
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-header3 .icon::before {
  transform: translateY(-25%) rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 0;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    transition: transform .3s;
}
}


#all-toggle:checked ~ .accordion-container .accordion-header .icon::before {
  transform: rotate(225deg);
}

#two-toggle:checked ~ .accordion-container2 .accordion-header2 .icon::before {
  transform: rotate(225deg);
}

#three-toggle:checked ~ .accordion-container3 .accordion-header3 .icon::before {
  transform: rotate(225deg);
}

/* 中身部 */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  background: #fefbff;
  padding: 0 15px;
  border-top: 1px solid #b47cc0; /* 上と区切り */
}

.accordion-content2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  background: #fefbff;
  padding: 0 15px;
  border-top: 1px solid #b47cc0; /* 上と区切り */
}

.accordion-content3 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  background: #fefbff;
  padding: 0 15px;
  border-top: 1px solid #b47cc0; /* 上と区切り */
}



#all-toggle:checked ~ .accordion-container .accordion-content {
  max-height: 500px;
  padding: 15px;
}

#two-toggle:checked ~ .accordion-container2 .accordion-content2 {
  max-height: 500px;
  padding: 15px;
}

#three-toggle:checked ~ .accordion-container3 .accordion-content3 {
  max-height: 500px;
  padding: 15px;
}
@media screen and (max-width:768px) {
#all-toggle:checked ~ .accordion-container .accordion-content {
  max-height: 500px;
  padding: 5px;
}

#two-toggle:checked ~ .accordion-container2 .accordion-content2 {
  max-height: 500px;
  padding: 5px;
}

#three-toggle:checked ~ .accordion-container3 .accordion-content3 {
  max-height: 500px;
  padding: 5px;
}
}

/* ボタン風リンク */
.accordion-content a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 2px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 0.6rem;
}

.accordion-content2 a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 2px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 0.6rem;
}

.accordion-content3 a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 2px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 0.6rem;
}


/* モーダルのスタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 背景を半透明の黒に */
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  margin: auto;
}

.modal-content img {
  width: 100%;
  height: auto;
  max-height: 80vh; /* 画像の高さを制限 */
  object-fit: contain; /* 画像が枠に収まるように */
}

.close-button {
  position: absolute;
  top: -10px;
  right: 20px;
  color: #f45c82;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.close-button:hover {
  color: #ccc;
}

/* サムネイル画像のスタイル（必要に応じて調整） */
.accordion-content img {
  width: 100%; /* サムネイルのサイズ */
  height: auto;
  cursor: pointer;
}



.howtoFlow2 p { width: 70%; margin: 30px auto 30px; padding: 10px; text-align: center; display: flex; }
.howtoFlow2 ul { width: 90%; margin: 10px auto; padding: 10px; text-align: center; display: flex; }
.howtoFlow2 ul li { padding: 10px; }

@media screen and (max-width:768px){
	.howtoFlow2 p { width: 74%; margin: 10px auto 0px; padding: 10px 10px 0; text-align: center; display: flex; }
	.howtoFlow2 ul { width: 90%; margin: 10px auto; padding: 10px; text-align: center; display: flex; flex-wrap: wrap; }
	.howtoFlow2 ul li { width: 46%; padding: 2%; }
}



/* map */
#mapSec { padding-bottom: 60px; background-color: #c7f0fe; }
#mapSec,
#mapSec #mapArea { position: relative; }

#mapSec #mapOsaka { margin: 0; position: absolute; top: 62%; left: 3.5%; width: 260px; }
#mapSec #mapNagoya { margin: 0; position: absolute; top: 62%; right: 2.5%; width: 260px; }
#mapSec a:hover { opacity: 1; }
#mapSec a img { transition: 0.7s; }
#mapSec a:hover img { filter: brightness(130%); }

@media screen and (max-width:1280px){
	#mapSec::before { top: 35.7vw; height: calc(100% - 35.7vw); }
	#mapSec #mapOsaka,
	#mapSec #mapNagoya { width: 25%; }
}

@media screen and (max-width:768px){
	#mapSec { padding-bottom: 40px; }
	#mapSec a:hover img { filter: brightness(100%); }
}

/* directionSec */
#mapSec .contentsOuter { box-sizing: border-box; max-width: 1150px; background-color: #fff; margin-top: 40px; border-radius: 15px; padding: 20px 15px 5px 20px; }
#mapSec .contentsOuter + .contentsOuter { margin-top: 30px; }
.directionSec { background-color: #fff; padding-bottom: 0; }
.directionSec h2 { text-align: center; margin-right: 5px; }
.directionSec h2 + p { text-align: center; margin-top: 10px; margin-right: 5px; }
.directionSec h2 + p img { width: 100px; vertical-align: middle; margin-left: 3%; }
.directionSec h2 + p span { color: #E60000; font-size: 80%; margin-left: 5px; }
.directionSec .directionArea { display: flex; justify-content: center; margin-top: 0; }
.directionSec .directionArea .areaMap { margin-top: 10px;}
.directionSec .directionArea > ul { margin-top: 5px; margin-left: 20px; margin-right: 5px; width: 77%; }
.directionSec .directionArea > ul > li { position: relative; margin-bottom: 8px; }
.directionSec .directionArea > ul > li:nth-child(2) { position: relative; margin-bottom: 10px; }
.directionSec .directionArea > ul > li ul { position: absolute; left: 0; right: 0; text-align: center; max-width: 92%; margin: 0 auto; display: flex; }
#osakaSec .directionArea > ul > li ul { bottom: 4.5%; }
#osakaSec .directionArea > ul > li#kamogawa ul { bottom: 2.5%; }
#osakaSec .directionArea > ul > li#unyushikyok ul { width: 68%; bottom: 0.5%; }
#osakaSec .directionArea > ul > li#kamitoba ul { padding-top: 5px; bottom: 2.5%; }
#osakaSec .directionArea > ul > li#nagaokakyo ul { bottom: 2.5%; }

.directionSec .directionArea2 { display: flex; justify-content: center; margin-top: 0; }
.directionSec .directionArea2 > ul {display: flex; margin-left: 0px; margin-right: 5px; width: 100%; }
.directionSec .directionArea2 > ul > li { position: relative; margin: 4px; }
.directionSec .directionArea2 > ul > li ul { position: absolute; left: 0; right: 0; text-align: center; max-width: 92%; margin: 0 auto; display: flex; }
#osakaSec .directionArea2 > ul > li#ionmallgojo ul { bottom: 3.5%; }
#osakaSec .directionArea2 > ul > li#ionmallkatsura ul { bottom: 3.5%; }
#osakaSec .directionArea2 > ul > li#ionmallkyoto ul { bottom: 3.5%; }

#nagoyaSec .directionArea > ul > li { margin-bottom: 12px; }
#nagoyaSec .directionArea > ul > li ul { bottom: 2%; }
#nagoyaSec .directionArea > ul > li:last-child ul { bottom: 5%; }
.directionSec .directionArea + p, .directionSec .directionArea2 + p { font-size: 50%; }


/* #osakaSec .directionArea ul li#unyushikyok::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/osaka_img02_shadow.png") no-repeat center top / 100%; }*/


@media screen and (max-width:768px){
	#mapSec .contentsOuter { margin-top: 20px; padding: 10px 8px 15px 10px; }
	#mapSec .contentsOuter + .contentsOuter { margin-top: 15px; }
	.directionSec h2 + p { text-align: left;  font-size: 62%; }
	.directionSec h2 + p img { width: 20%; vertical-align: middle; margin-left: 2%; }
	.directionSec .directionArea { display: block; justify-content: center; margin-top: 10px; }
	.directionSec .directionArea2 { display: block; justify-content: center; margin-top: 0; }
	.directionArea .areaMap { width: 99%; margin-right: 4px; padding-right: 6px;}
	.directionSec .directionArea > ul > li { position: relative; margin-bottom: 4px; }
	.directionSec .directionArea > ul > li:nth-child(2) { position: relative; margin-bottom: 4px; }
	.directionSec .directionArea > ul { width: 100%; display: flex; flex-wrap: wrap; margin-top: 1px; margin-left: 0px; margin-right: 0px;}
	.directionSec .directionArea2 > ul { width: 100%; display: flex; flex-wrap: wrap; margin-top: 1px; margin-left: 0px; margin-right: 0px;}
	.directionSec .directionArea2 > ul > li { position: relative; margin: 1% 1% 1% 0%; }
	.directionArea ul li { width: 49%; margin: 1% 1% 1% 0%;}
	.directionArea2 ul li { width: 49%; margin: 1% 1% 1% 0%;}
	.directionArea ul li:nth-child(even) { width: 49%; margin: 1% 1% 1% 0%;}
	.directionArea ul li ul li { width: 48%; margin: 1%;}
	#osakaSec .directionArea > ul > li#kamogawa ul { bottom: 2.5%; }
	#osakaSec .directionArea ul li#unyushikyok ul li { width: 100%; margin: 1%;}
	#osakaSec .directionArea > ul > li#unyushikyok ul { width: 68%; bottom: 0.5%; }
	#osakaSec .directionArea > ul > li#kamitoba ul { bottom: 4.5%; }
	#osakaSec .directionArea > ul > li#nagaokakyo ul { bottom: 2.5%; }
	#osakaSec .directionArea2 > ul > li#ionmallgojo ul { bottom: 2.5%; }
	#osakaSec .directionArea2 > ul > li#ionmallkatsura ul { bottom: 2.5%; }
	#osakaSec .directionArea2 > ul > li#ionmallkyoto ul { bottom: 2.5%; }
	#nagoyaSec .directionArea > ul > li { margin-bottom: 4px; }
	#nagoyaSec .directionArea > ul > li#asutohamaotsu ul { bottom: 2.5%; }
	#nagoyaSec .directionArea > ul > li#yamashina ul { bottom: 2.5%; }
}


#termsTitle { font-size: 1.8rem; margin-top: 60px; }
#termsArea { margin: 10px auto 0; border: solid 1px #fbd7b5; max-width: 980px; }
#termsArea #termsTxt { height: 300px; overflow-y: scroll; text-align: left; padding: 20px 30px; }
#termsArea #termsTxt > p { text-align: center; }
#termsArea #termsTxt dl { margin-top: 40px; }
#termsArea #termsTxt dl dt { margin-top: 30px; }
#termsArea #termsTxt dl dd p { margin: 0; }
#termsArea #termsTxt dl dd ol,
#termsArea #termsTxt dl dd ul { padding-left: 1em; text-indent: -1em; }
#termsArea #termsCheck { margin: 0; padding: 10px; background-color: #fbd7b5; display: flex; justify-content: center; }
#termsArea #termsCheck label { margin-left: 10px; }

#btnApply.disableDisabled { pointer-events: none; opacity: 0.6; }

@media screen and (max-width:1200px){
	#cp #giftBg01::before { top: 5.3vw; height: calc(100% - 5.3vw); }
}

@media screen and (max-width:768px){
	#cp { margin-top: 40px; }
	#giftBgWhite01 { padding: 30px 30px 0; }
	#giftBgWhite02 { padding: 20px 30px 30px; }
	#giftBgWhite02 div + div { margin-top: 15px; }
	#giftBgWhite02 div + div + div { margin-top: 30px; }
	#giftBgWhite02 div + ul.flexList { margin-top: 20px; }
	
	#cp #giftBg02 { padding-bottom: 40px; }
	
	#termsTitle { margin-top: 30px; font-size: 1.5rem; }
	#termsArea { margin-top: 10px; }
	#termsArea #termsTxt > p { margin-top: 0; }
	#termsArea #termsTxt dl { margin-top: 20px; }
	#termsArea #termsTxt dl dt { margin-top: 10px; }
}

/* info */
#infoSec { margin-top: 60px; padding-bottom: 20px; font-size: 90%; font-feature-settings: "palt";}
#infoSec .contentsOuter { background-color: #eaddeb; box-sizing: border-box; border-radius: 15px; max-width: 1070px; padding: 30px 40px; }
#infoSec dt { font-weight: bold; }
#infoSec dd a:link,#infoSec dd a:visited { color: #0096FF;}


@media screen and (max-width:768px){
	#infoSec { margin: 40px 10px 0; padding-bottom: 10px; font-size: 0.74em; }
  	#infoSec .contentsOuter { padding: 16px 16px; }
}

/* info2 */
#infoSec2 { margin-top: 1px; padding-bottom: 60px; font-size: 84%; font-feature-settings: "palt";}
#infoSec2 .contentsOuter { background-color: #eaddeb; box-sizing: border-box; border-radius: 15px; max-width: 1070px; padding: 30px 40px; }
#infoSec2 dl { display: flex; margin-top: 20px; } 
#infoSec2 dt { font-size: 84%; background-color: #fff; box-sizing: border-box; border-radius: 10px; width: 11%; padding: 5px 20px; line-height: 1.6; }
#infoSec2 dd { width: 88%; margin-left: 1%; font-weight: 500; line-height: 1.6; }
#infoSec2 p { font-family: sans-serif; font-size: 74%; font-weight: 500; line-height: 1.4; color: #222; }


@media screen and (max-width:768px){
	#infoSec2 { margin: 10px 10px 0; padding-bottom: 40px; font-size: 0.74em; line-height: 1.8; }
  	#infoSec2 .contentsOuter { padding: 16px 16px; }
	html #infoSec2 p { font-size: 70%; line-height: 1.4; }
	#infoSec2 dl { display: flex; margin-top: 20px; }
	#infoSec2 dt { font-size: 0.64em; background-color: #fff; box-sizing: border-box; border-radius: 6px; width: 14%; padding: 1em 0.5em; line-height: 1.6; }
	#infoSec2 dd { font-size: 0.70em; }
}



.modal-trigger-youtube:hover {
	opacity: 0.7;
}


/* 既存のモーダルスタイルに追加 */
#youtubeModal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

#youtubeModal .modal-content {
  position: relative;           /* 重要：子要素の絶対配置の基準 */
  width: 100%;
  max-width: 700px;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

#youtubeModal iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ×ボタン：.modal-content の右側に配置（重ならず） */
#youtubeModal .close-button {
  position: absolute;
  top: 5%;
  right: 12.5%;                         /* 右端に寄せる */
 /* 中央揃え + 半分はみ出し */
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
  transition: all 0.2s ease;
}


/* スマホ対応：max-width 700pxを超えないように */
@media (max-width: 768px) {
  #youtubeModal .modal-content {
    max-width: 90vw; /* 画面幅の90% */
  }
  #youtubeModal .close-button {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}