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

/* =========================
背景
========================= */

.popup-area{padding: 80px 0;}

.popup-inner{
  max-width:1100px;
  margin:0 auto;
background:url(img/bg-dorifu-seamless.jpg) repeat;
  background-size: 512px 512px;
padding: 50px;
}


@media screen and (max-width: 1100px) {
.popup-inner{ width:95%; padding: 50px 25px;}
}

@media screen and (max-width: 600px) {
.popup-inner{ width:95%; padding: 50px 10px;}

}


/* =========================
PC横並び
========================= */

.popup-flex{
  display:flex;
  gap:40px;
  align-items:flex-start;
}

@media screen and (max-width: 1100px) {
.popup-flex{
  display:block;
}
}


/* =========================
左KV
========================= */

.popup-kv{
  width:350px;
}

.popup-kv img{
  width:100%;
  display:block;

  box-shadow:
  0 10px 30px rgba(0,0,0,.18);
}

.popup-kv img:hover{
  transform:translateY(-2px);
    box-shadow:
  0 12px 40px rgba(0,0,0,.20);
}

@media screen and (max-width: 1100px) {
.popup-kv{ width:350px; margin: 0 auto;}
.popup-kv img{}

}

@media screen and (max-width: 600px) {
.popup-kv{ width:300px; margin: 0 auto;}

}


/* =========================
右側
========================= */

.popup-right{
  width: fit-content;
}

@media screen and (max-width: 1100px) {
.popup-right{margin: 50px auto 25px; width: 90%;}
}

@media screen and (max-width: 900px) {
.popup-right{width: 90%;}
}

@media screen and (max-width: 768px) {
.popup-right{width: 100%;}
}

/* =========================
タイトル
========================= */

.popup-title{
  padding:20px 30px;
  text-align:center;
}

.popup-title img{width: 350px;}

.popup-catch{
  font-size:28px; 
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-weight:bold;
}

.popup-text{   font-size:20px; 
  font-weight:bold; text-align: left; line-height: 1.6;
}


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

.popup-title{
  padding:20px 20px;
}

.popup-title img{width: 300px;}

.popup-catch{
  font-size:24px; line-height: 1.3; text-align: center;}


.popup-text{   font-size:16px;}
}
/* =========================
スケジュール
========================= */


.schedule-wrap{
  display:flex;
  flex-direction:column;
  gap:28px;
}

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

  .schedule-wrap{
    display:grid;

     grid-template-columns:
    1fr;

    gap:20px;
  }

}

/* =========================
カード
========================= */

.schedule-card{
  display:flex;
  align-items:stretch;
  width:100%;
  background:#f5ecd7;
  border-radius:14px;
  overflow:hidden;
  border:2px solid rgba(80,50,20,.25);
  box-shadow:
  0 3px 10px rgba(0,0,0,.08);
  transition:.2s ease;
}

.schedule-card:hover{
  transform:translateY(-2px);
  box-shadow:
  0 8px 20px rgba(0,0,0,.12);
}

@media screen and (max-width: 768px){
 .schedule-card{display:block; width: 80%; margin: 15px auto;}
}

@media screen and (max-width: 600px){
 .schedule-card{display:block; width: 100%;}
}

/* =========================
左画像
========================= */

img.thumb-pc{display: block;}
img.thumb-sp{display: none!important;}

.schedule-thumb{
  width:178px;
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;
}

.schedule-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

@media screen and (max-width: 900px) {
.schedule-thumb{ width:125px;}
}

@media screen and (max-width: 768px) {
.schedule-thumb{ width:100%;}

img.thumb-pc{display: none!important;}
img.thumb-sp{display:block!important;}

.schedule-thumb{ width:100%;}
.schedule-thumb img{  width:100%;}
  
}


/* =========================
右テキスト
========================= */

.schedule-info{
  flex:1;
  padding:10px 10px 0px 25px;

  display:flex;
  flex-direction:column;
}


/* タイトル */

.schedule-info h3{
  font-size:22px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:5px; text-align: left;
}


/* 住所 */

.address{
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  color:#000;
  margin-bottom:10px;
}


/* 日付 */

.date{
  margin-top:auto;

  border-top:
  2px dotted rgba(0,0,0,.4);

  padding-top:10px;
  font-size:20px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  font-feature-settings:"palt";
}

.date span{display: inline-block; font-size: 16px; color: #f2daac; margin:0 5px;
border-radius: 50%;padding: 3px 5px;line-height:1.3;}
.date span:first-child{ font-size: 16px; color: #000; background: none!important;}

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

.schedule-info{  padding:10px 10px 0px 10px;}
.schedule-info h3{ font-size:19px;}
.address{ font-size:15px;}
.date{font-size:18px;}
.date span{font-size: 14px;}
.date span:first-child{ font-size: 14px;}
}


/* =========================
色
========================= */
/*
.schedule-card:nth-of-type(1) .schedule-thumb{background-color:#076e1b;}
.schedule-card:nth-of-type(2) .schedule-thumb{background-color:#13568a;}
.schedule-card:nth-of-type(3) .schedule-thumb{background-color:#833388;}
*/

.schedule-card .schedule-thumb{ background-size: 50px; background-repeat: repeat;}
.schedule-card.kawagoe .schedule-thumb{ background-image: url("img/bg_g.png");}
.schedule-card.daiba .schedule-thumb{ background-image: url("img/bg_r.png");}
.schedule-card.hakodate .schedule-thumb{ background-image: url("img/bg_b.png");}
.schedule-card.shizuoka .schedule-thumb{ background-image: url("img/bg_p.png");}


.schedule-card a{display: inline-block; margin-left: 10px; color: #fff; padding: 2px 3px; font-size: 12px;}

/* 川越 */

.kawagoe h3{ color:#14803a;}
.kawagoe .date span{background-color: #14803a;}

.kawagoe .address a{background-color:#14803a; }
.kawagoe .address a:hover{background-color:#54C81B;}



/* 函館 */

.hakodate h3{color:#1d6fb6;}
.hakodate .date span{background-color: #1d6fb6;}
.hakodate .address a{background-color:#1d6fb6;}
.hakodate .address a:hover{background-color:#73A6FD;}

/* 静岡 */

.shizuoka h3{ color:#8d3daf;}
.shizuoka .date span{background-color: #8d3daf;}
.shizuoka .address a{background-color: #8d3daf;}
.shizuoka .address a:hover{background-color: #9674DA;}


/* =========================
下部
========================= */

.popup-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  margin-top:40px;
  text-align:center;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";

}


/* テキスト */

.popup-note p{
  font-size:24px;
  font-weight:bold;

  color:#3a1a00;

  line-height:1.4;
}


/* 赤文字 */

.popup-note p span{
  color:#c70000;
  font-size:30px;
  margin-left:14px;
}


/* 両サイド線 */

.popup-note .line{
  display:block;
  width:50px;
  height:4px;
  background:#3a1a00;
  border-radius:10px;
}


/* 左 */
.popup-note .left{
  transform:rotate(40deg);
}

/* 右 */
.popup-note .right{
  transform:rotate(-40deg);
}

@media screen and (max-width: 700px) {
.popup-note p{font-size:18px;}
.popup-note p span{font-size:28px;margin-left:0px;}
.popup-note .line{width:40px;}
}