@charset "UTF-8";
/* components.css（共通パーツ集） */

/* =========================
   Text helpers
========================= */
small{
  font-size: 0.85em;
  line-height: 1.65;
}
.small1{ font-size: 88%; }
.small2{ font-size: 80%; }
.small3{ font-size: 70%; line-height: 1; }

.text1em{ padding-left: 1em; text-indent: -1em; }
.text1em_all{ padding-left: 1em; }

.text_arrow{ color: #BF4200; font-weight: bold; }
.text_arrow2{
  font-weight: bold;
  background: linear-gradient(to left, #feb47b 50%, #ff7e5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.midashi_text1 { color: #F0E5A5; font-weight: bold; }
.midashi_text2 { color: #FFFFFF; font-weight: bold; }
.midashi_text3 { color: #E3DDA9; font-weight: bold; }
.midashi_text5 { color: #F00E88; font-weight: bold;
	text-shadow: 0 0 7px #000000, 0 0 15px #000000;
}
.midashi_text4{
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 10px;
  text-shadow: 0 0 10px #CB7509, 0 0 20px #E3DB8C, 0 0 30px #E3DB8C;
}

.text_yellow1{ color: #E5D6AB; font-weight: bold; }
.text_yellow2{ color: #9C7605; font-weight: bold; }
.text_orange1{ color: #FF4700; font-weight: bold; }
.text_white1{ color: #FFFFFF; font-weight: bold; }
.text_white2{ color: #FFFFFF; }

.text_background{
  color: #ffffff;
  display: inline;
  padding: 12px 25px;
  background: linear-gradient(transparent 0%, #000000 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.main_text_right{
  text-align: right;
  width: 100%;
  margin: 0.5rem 0 2rem;
}

.mincho{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "MS P明朝", "MS明朝", serif;
  transform: rotate(.03deg);
}

/* タイトル */
.sub_title1 {
  font-size: 2.8rem; font-weight: bold;
	padding: 0.1rem 0 0.5rem 2.6rem;
	margin-top: 40px;
	margin-bottom: 30px;
  letter-spacing: 0px;
  text-shadow: 0 0 8px #B06200, 0 0 15px #BDB13C, 0 0 22px #D3CB77;
	border-left: 10px #CA274B solid;
	border-bottom: 1px #CA274B solid;
}

@media screen and (max-width: 960px) {
  .sub_title1 {
    font-size: 2.0rem;
		padding: 0.4rem 0 0.7rem 1.7rem;
		margin-top: 25px;
		margin-bottom: 18px;
		border-left: 7px #CA274B solid;
  }
}

/* =========================
   Card / Box
========================= */
.tic_box1{
  box-sizing: border-box;
  margin: 0 auto 30px;
  width: 100%;
  max-width: 1100px;
  font-size: 1.6rem;
  line-height: 1.8;
  padding: 1.5em 2.3em;
  background-color: rgba(0,0,0,0.50);
  border: 1px solid #867E69;
  border-radius: 1.3rem;
}
@media (max-width: 960px){
  .tic_box1{
    font-size: 1.5rem;
    line-height: 1.7;
    margin-bottom: 20px;
    padding: 1em 1.4em;
  }
}

/* intro_box1 / box2 も共通ならここに */
.intro_box1{
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  font-size: 1.6rem;
  line-height: 1.9;
  padding: 1.8em 2.5em;
  background-color: rgba(0,0,0,0.40);
  border: 1px #867E69 solid;
  border-radius: 1.3rem;
}
@media (max-width: 960px){
  .intro_box1{ padding: 1.2em 1.5em; }
}

.box2{
  width: 100%;
  max-width: 850px;
  margin: 0 auto 40px;
  padding: 30px 0 35px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.15) 50%, rgba(182,177,83,0.20) 100%);
  border: 1px #CAB870 solid;
  border-radius: 1.2rem;
}
@media (max-width: 960px){
  .box2{
    margin-bottom: 0;
    padding: 20px 0;
  }
}

.box_text1{
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

@media screen and (max-width: 960px){
  .box_text1{
    width: 100%;
    margin: 0;
  }
}

/* =========================
   Movie (YouTube)
========================= */
.movie-wrap{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.40);
  border: 1px solid #a08352;
  border-image: linear-gradient(to right, #AB997A, #886D4F);
  border-image-slice: 1;
}
.movie-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mov_text_right{
  text-align: right;
  width: 100%;
  margin: 0.7rem 0 1.5rem;
}

/* =========================
   Access
========================= */

.iframe_map {
  width: 100%;
  height: 500px;
}

@media screen and (max-width: 960px) {
  .iframe_map {
    width: 100%;
    height: 300px;
  }
}

/* =========================
   Utilities（必要分だけ）
========================= */
.img100per{ width: 100%; }
.img90per{ width: 90%; }
.img80per{ width: 80%; }

.big0{ font-size: 1.1em; font-weight: bold; line-height: 1; }
.big1{ font-size: 1.3em; font-weight: bold; }
.big2{ font-size: 1.6em; font-weight: bold; line-height: 1.1; }
.big3{ font-size: 2.0em; font-weight: bold; line-height: 1.2; }
.big4{ font-size: 2.5em; font-weight: bold; line-height: 1.3; }

@media (max-width: 960px){
  .big0{ font-size: 1.05em; }
  .big1{ font-size: 1.2em; }
  .big2{ font-size: 1.35em; }
  .big3{ font-size: 1.8em; }
  .big4{ font-size: 2.2em; }
}

/* margin utilities（使う分だけ。必要なら増やせる） */
.mar_t5{ margin-top: 5px; }
.mar_t10{ margin-top: 10px; }
.mar_t15{ margin-top: 15px; }
.mar_t20{ margin-top: 20px; }
.mar_t25{ margin-top: 25px; }
.mar_t30{ margin-top: 20px; }
.mar_t35{ margin-top: 25px; }
.mar_t40{ margin-top: 40px; }
.mar_t60{ margin-top: 60px; }

@media (max-width: 960px){
  .mar_t10{ margin-top: 8px; }
  .mar_t15{ margin-top: 13px; }
  .mar_t20{ margin-top: 16px; }
  .mar_t25{ margin-top: 20px; }
  .mar_t30{ margin-top: 23px; }
  .mar_t35{ margin-top: 26px; }
  .mar_t40{ margin-top: 28px; }
  .mar_t60{ margin-top: 45px; }
}