@charset "utf-8";
/* ===================================================
	tama CSS
====================================================== */

#main_tit { background: url(../../tama/img/tit_bg.webp)no-repeat center center; background-size: cover;}

.view_sp { display: none;}
.inner_md { width: 1200px; max-width: 92%; margin: 0 auto;}
.flex_col { display: flex; justify-content: space-between;}

#top_lead { position: relative; padding: 110px 0; text-align: center;}
#top_lead p+p { margin-top: 50px;}
#top_lead >img { position: absolute; bottom: 0; left: calc(50% - 550px); transform: translateX(-50%);}


@media screen and (max-width: 1250px) {
  #top_lead >img { left: 100px;}
}

@media screen and (max-width: 600px) {
  #main_tit h1 span.tit_en { line-height: 0.6;}
  .view_sp { display: block;}
  .view_pc { display: none;}
  .flex_col { display: block;}

  #top_lead { width: 92%; margin: 0 auto; text-align: left; padding: 50px 0 80px;}
  #top_lead p+p { margin-top: 30px;}
  #top_lead >img { left: 16%; width: 92px;}
}


/* ---------------------------------------------------
	sec1
------------------------------------------------------ */
#sec1 { padding: 140px 0 150px; background-color: #e9eff4;}
#sec1 h2 { position: relative; font-size: 32px; text-align: center; margin: 0 0 60px;}
#sec1 h2 .tit_en { position: absolute; transform: rotate(14deg); font-size: 100px; color: #f39300; font-family: 'Allura'; line-height: 1; letter-spacing: 0; margin: 0 0 0 50px;}
#sec1 .flex_col { align-items: center;}
#sec1 .flex_col >img { width: 54%;}
#sec1 .sec_txt { width: 40%;}
#sec1 .sec_txt h3 { margin: 0 0 30px; padding: 0 0 10px; border-bottom: 1px solid #d2d2d2; font-size: 30px;}
#sec1 p.sec1_stit { display: table; margin: 0 0 30px; padding: 3px 20px; font-size: 18px; color: #fff; background-color: #1586b6; border-radius: 20px;}
.detail_txt { margin: 30px 0 0; padding: 10px 0 10px 20px; border-left: 2px solid #f39300;}
.detail_txt dt { padding: 0 0 5px; font-weight: bold;}

#sec1 .flex_col:nth-of-type(2) { margin-top: 120px; flex-direction: row-reverse;}

@media screen and (max-width: 600px) {
  #sec1 { padding: 50px 0;}
  #sec1 h2 { margin: 0 0 30px; font-size: 26px;}
  #sec1 h2 .tit_en { margin: 0; font-size: 50px; right: 4%; top: -72px;}
  #sec1 .flex_col >img { width: 100%;}
  #sec1 .sec_txt { width: 100%;}
  #sec1 .sec_txt h3 { margin: 10px 0 20px; font-size: 22px; text-align: center;}
  #sec1 p.sec1_stit { margin: 0 auto 20px;}
  #sec1 .flex_col:nth-of-type(2) { margin-top: 50px;}
}

/* ---------------------------------------------------
	sec2
------------------------------------------------------ */
#sec2 { padding: 160px 0 190px;}
#sec2 h2 { position: relative; display: table; font-size: 32px; text-align: center; margin: 0 auto 60px;}
#sec2 h2 .tit_en { position: absolute; transform: rotate(-20deg); font-size: 100px; color: #f39300; font-family: 'Allura'; line-height: 1; letter-spacing: 0; left: -238px; bottom: 0;}
#sec2 h2+p { text-align: center; padding-bottom: 100px;}
#sec2 ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec2 ul li { width: 31.6%; margin: 0 0 48px;}
#sec2 ul li div { position: relative;}
#sec2 ul li p.photo_cap { font-size: 12px; color: #fff; right: 5px; bottom: 5px; position: absolute; font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;}
#sec2 ul li h3 { padding: 10px 0; font-size: 20px; text-align: center; background: #e9eff4;}
#sec2 a.btn2 { display: table; margin: 40px auto 0; padding: 10px 0; width: 250px;}


@media screen and (max-width: 600px) {
  #sec2 { padding: 80px 0 80px;}
  #sec2 h2 { margin: 0 auto 30px; font-size: 26px;}
  #sec2 h2 .tit_en { margin: 0; font-size: 50px; right: 4%; top: -60px;}
  #sec2 h2+p { padding-bottom: 50px; text-align: left;}
  #sec2 ul { display: block;}
  #sec2 ul li { width: 100%; margin-bottom: 20px;}
  #sec2 ul li img { width: 100%;}
  #sec2 ul li h3 { padding: 10px 0; font-size: 16px;}
}


/* ---------------------------------------------------
	sec3
------------------------------------------------------ */
#sec3 { position: relative; padding: 150px 0 120px; background: url(../../tama/img/sec3_bg.png) no-repeat left 23px bottom 34px; background-color: #f6f5ed;}
#sec3 .inner_md+img { position: absolute; top: -56px; left: calc(50% - 550px); transform: translateX(-50%);}
#sec3 h2 { position: relative; font-size: 32px; text-align: center; margin: 0 0 40px; color: #a66e2e;}
#sec3 h2 .tit_en { position: absolute; transform: rotate(10deg); font-size: 100px; color: #f39300; font-family: 'Allura'; line-height: 1; letter-spacing: 0; width: 4em; top: -80px;}
#sec3 h2+p { margin: 0 0 70px; text-align: center;}

#sec3 .flex_col { align-items: center;}
#sec3 .flex_col .sec_txt { width: 30%;}
#sec3 .flex_col .sec_txt h3 { margin: 0 0 20px; font-size: 30px;}
#sec3 .flex_col .sec_txt ul { margin: 0 0 50px;}
#sec3 .flex_col .sec_txt li::before { content: "■";}
#sec3 .flex_col > ul { display: flex; flex-wrap: wrap; width: 58%; justify-content: space-between;} 
#sec3 .flex_col > ul li { width: 49.5%; margin-bottom: 1%;}
#sec3 a.btn2 { display: table; padding: 10px 0; width: 250px;}

@media screen and (max-width: 1250px) {
  #sec3 .inner_md+img { left: 100px;}
}


@media screen and (max-width: 1370px) {
  #sec3 h2 .tit_en { right: 0;}
}


@media screen and (max-width: 600px) {
  #sec3 { padding: 60px 0 80px; background-size: 80px; background-position: left 20px bottom 10px;}
  #sec3 h2 { margin: 0 auto 30px; font-size: 26px;}
  #sec3 h2 .tit_en { margin: 0; font-size: 50px; right: 4%; top: -80px;}
  #sec3 .inner_md+img { top: -36px; left: 16%; width: 92px;}
  #sec3 h2+p { text-align: left; margin-bottom: 30px;}
  #sec3 .flex_col .sec_txt { width: 100%; margin: 0 0 30px; text-align: center;}
  #sec3 .flex_col .sec_txt h3 { font-size: 22px;}
  #sec3 .flex_col .sec_txt ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 30px;}
  #sec3 .flex_col .sec_txt ul li { margin-right: 20px;}
  #sec3 .flex_col > ul { width: 100%;}
  #sec3 a.btn2 { margin: 0 auto;}
}

/* ---------------------------------------------------
	last_txt
------------------------------------------------------ */
#last_txt { position: relative; text-align: center; padding: 150px 0 140px;}
#last_txt h2 { font-size: 30px; padding: 0 0 20px;}
#last_txt img { position: absolute; bottom: 0; right: calc(50% - 550px); transform: translateX(-50%);}

@media screen and (max-width: 600px) {
  #last_txt { width: 92%; margin: 0 auto; padding: 80px 0 100px;}
  #last_txt h2 { font-size: 26px;}
  #last_txt img { right: 0; width: 73px;}
  
}


/* ---------------------------------------------------
	更新履歴
------------------------------------------------------


------------------------------------------------------ */