@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, #Header-Area, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, #Header-Area, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/**/
/*==========================================
Common CSS
==========================================*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 62.5%; /*1rem = 10px*/
}
body {
  min-height: 100vh;
  position: relative;
  font-size: 1.6rem; /*16px*/
  line-height: 1.8;
  letter-spacing: 0.1rem;
  color: #333333;
  background-color: #ffffff;
  font-family: "Noto Sans JP", 'Roboto', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
}
body {
  animation: fadein 1s forwards;
}
@keyframes fadein {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
img {
  width: 100%;
  vertical-align: middle;
}
/*-------------
font-family
---------------*/
.serif {
  font-family: 'Noto Serif JP', serif;
}
.roboto {
  font-family: 'Roboto', sans-serif;
}
/*-------------
見出し
---------------*/
/*-----中央(青)-----*/
.ttl-c {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  position: relative;
  padding-bottom: 25px;
}
.ttl-c span {
  display: block;
  font-family: 'Roboto', sans-serif;
  color: var(--blue);
  font-weight: 300;
}
.ttl-c::after {
  content: "";
  width: 61px;
  height: 9px;
  background: url("../images/ttl-1-bg.png") no-repeat;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
/*-----中央（白）-----*/
.ttl-c-w {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  position: relative;
  padding-bottom: 25px;
  color: #fff;
}
.ttl-c-w span {
  display: block;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-weight: 300;
}
.ttl-c-w::after {
  content: "";
  width: 61px;
  height: 9px;
  background: url("../images/ttl-1-bg-w.png") no-repeat;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
/*-----左（青）-----*/
.ttl-l {
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  position: relative;
  padding-bottom: 25px;
}
.ttl-l span {
  display: block;
  font-family: 'Roboto', sans-serif;
  color: var(--blue);
  font-weight: 300;
}
.ttl-l::after {
  content: "";
  width: 61px;
  height: 9px;
  background: url("../images/ttl-1-bg.png") no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
}
/*-----左右青マル----*/
.ttl-maru {
  text-align: center;
}
.ttl-maru span {
  position: relative;
  padding: 0 27px;
}
.ttl-maru span::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 999px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.ttl-maru span::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 999px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
/*-------------
font-size
---------------*/
@media screen and (min-width: 769px) {
  .fs72 {
    font-size: 7.2rem;
  }
  .fs60 {
    font-size: 6.0rem;
  }
  .fs54 {
    font-size: 5.4rem;
  }
  .fs48 {
    font-size: 4.8rem;
  }
  .fs44 {
    font-size: 4.4rem;
  }
  .fs40 {
    font-size: 4rem;
  }
  .fs38 {
    font-size: 3.8rem;
  }
  .fs36 {
    font-size: 3.6rem;
  }
  .fs34 {
    font-size: 3.4rem;
  }
  .fs32 {
    font-size: 3.2rem;
  }
  .fs30 {
    font-size: 3rem;
  }
  .fs28 {
    font-size: 2.8rem;
  }
  .fs26 {
    font-size: 2.6rem;
  }
  .fs24 {
    font-size: 2.4rem;
  }
  .fs22 {
    font-size: 2.2rem;
  }
  .fs20 {
    font-size: 2rem;
  }
  .fs18 {
    font-size: 1.8rem;
  }
  .fs16 {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }
  .fs72 {
    font-size: 3.4rem;
  }
  .fs60 {
    font-size: 3.2rem;
  }
  .fs54 {
    font-size: 3rem;
  }
  .fs48 {
    font-size: 2.6rem;
  }
  .fs44 {
    font-size: 2.6rem;
  }
  .fs40 {
    font-size: 2.4rem;
  }
  .fs38 {
    font-size: 2.4rem;
  }
  .fs36 {
    font-size: 2.2rem;
  }
  .fs34 {
    font-size: 2.2rem;
  }
  .fs32 {
    font-size: 2.2rem;
  }
  .fs30 {
    font-size: 2rem;
  }
  .fs28 {
    font-size: 2rem;
  }
  .fs26 {
    font-size: 2rem;
  }
  .fs24 {
    font-size: 2rem;
  }
  .fs22 {
    font-size: 1.8rem;
  }
  .fs20 {
    font-size: 1.8rem;
  }
  .fs18 {
    font-size: 1.6rem;
  }
  .fs16 {
    font-size: 1.4rem;
  }
}
/*-------------
column
---------------*/
.wrap600 {
  max-width: 640px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrap800 {
  max-width: 840px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrap1000 {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wrap1200 {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.wrap1400 {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media screen and (max-width: 768px) {
  .wrap600, .wrap800, .wrap1000, .wrap1200, .wrap1400 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
/*-----m------*/
@media screen and (min-width: 769px) {
  :root {
    --m20: 20px;
    --m30: 30px;
    --m40: 40px;
    --m50: 50px;
    --m60: 60px;
    --m70: 70px;
    --m80: 80px;
    --m100: 100px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --m20: 10px;
    --m30: 15px;
    --m40: 20px;
    --m50: 25px;
    --m60: 30px;
    --m70: 35px;
    --m80: 40px;
    --m100: 50px;
  }
}
/*-------------
表示・非表示
---------------*/
@media screen and (min-width:769px) { /*PC*のみで表示*/
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}
@media screen and (max-width:768px) { /*スマホのみで表示*/
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}
:root {
  --blue: #007bc6;
}
/*-------------
link
---------------*/
a {
  color: #333333;
  text-decoration: none;
}
a:link {
  color: #333333;
  text-decoration: none;
}
a:visited {
  color: #333333;
  text-decoration: none;
}
a:hover {
  opacity: .8;
  color: var(--blue);
  text-decoration: none;
  transition: .3s;
}
a:active {
  color: #333333;
  text-decoration: none;
}
/*-------------
電話番号
---------------*/
@media screen and (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  a[href^="tel:"] {
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  a[href^="tel:"]:hover {
    text-decoration: underline;
  }
}
/*-------------
indent
---------------*/
.indent {
  padding-left: 1em;
  text-indent: -1em;
}
/*==============================================================
ローディングアニメーション
==============================================================*/
#logo_loader {
  display: none;
}

/*#logo_loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  background-color: #fff;
}
#logo_loader .f_logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 210px;
  height: 100px;
  text-align: center;
  color: #fff;
}
#logo_loader .f_logo img {
  width: 100%;
  height: auto;
}
@media screen and (max-width:768px) {
  #logo_loader .f_logo {
    width: 120px;
    height: 57px;
  }
}
#logo_loader .f_logo:before {
  content: "";
  display: block;
  width: 100%;
  height: 110%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 100%;
  animation: loadLogo 1.5s;
}
@keyframes loadLogo {
  0% {
    left: 0;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
#logo_loader.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  animation-delay: 2s;
}
@keyframes slideOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}*/
/*==============================================================
#Header-Area
==============================================================*/
@media screen and (min-width:769px) {
  #Header-Area #open, #Header-Area #close {
    display: none;
  }
  #Header-Area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*はじめの高さを設定*/
    height: 100px;
    position: relative;
  }
  #Header-Area div.logo {
    max-width: 130px;
    margin: 20px 0 20px 40px;
  }
  #Header-Area div.menu {
    flex-shrink: 0;
  }
  #Header-Area nav ul {
    display: flex;
    margin-right: 40px;
    margin-top: -10px;
  }
  #Header-Area nav ul li {
    margin-left: 40px;
  }
}
@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-170px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width:768px) {
  #Header-Area {
    display: flex;
    height: 60px;
  }
  #Header-Area .logo {
    max-width: 110px;
    padding: 9px 0 0 20px;
  }
  .g-menu #open, .g-menu #close {
    cursor: pointer;
    position: fixed;
    right: 0;
    top: 0;
    color: #fff;
    background: #333;
    padding: 10px;
    font-size: 4rem;
    z-index: 999999;
  }
  .g-menu #open.none {
    display: none;
  }
  .g-menu .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    height: 100vh;
  }
  .g-menu .overlay.show {
    opacity: 1;
    pointer-events: auto;
  }
  .g-menu ul {
    margin-top: 60px;
  }
  .g-menu ul a {
    display: block;
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #444444;
    background: #333333;
  }
  .g-menu ul a:last-of-type {
    border-bottom: 1px solid #444444;
  }
  .g-menu a {
    color: #fff;
  }
  .g-menu a:link {
    color: #fff;
  }
  .g-menu a:visited {
    color: #fff;
  }
  .g-menu a:hover {
    opacity: .8;
  }
  .g-menu a:active {
    color: #fff;
  }
}
/*--------------- スクロールでメニュー固定 ---------------*/
/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#Header-Area.HeightMin {
  position: fixed;
  top: 0; /*ポジション設定topを0*/
  left: 0;
  right: 0;
  z-index: 9999; /*最前面へ*/
  height: 70px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  animation: DownAnime 0.5s forwards;
}
@media screen and (min-width:769px) {
  #Header-Area.HeightMin div.logo {
    max-width: 85px;
  }
  #Header-Area.HeightMin nav ul {
    margin-top: 0;
  }
}
@media screen and (max-width:768px) {
  #Header-Area.HeightMin {
    height: 60px;
  }
}
@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-170px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*==============================================================
Fv-Area
==============================================================*/
#Fv-Area {
  position: relative;
}
#Fv-Area img {
  width: 100%;
  height: auto;
}
#Fv-Area .fv_copy {
  max-width: 679px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  transform: translate(-50%, -60%);
}
@media screen and (min-width:769px) {
  #Fv-Area .slide-items.sp {
    display: none;
  }
}
@media screen and (max-width:768px) {
  #Fv-Area .fv_copy {
    width: 90%;
  }
  #Fv-Area .slide-items.pc {
    display: none;
  }
}
#Fv-Area .slide-items {
  width: 100%;
  height: 100%;
}
#Fv-Area .slide-items img {
  width: 100%;
  /*object-fit: cover;*/
}
/*==============================================================
おしらせ
==============================================================*/
#News-Area {
  padding-top: var(--m60);
}
#News-Area .flex {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
#News-Area .flex h2 {
  margin-right: 100px;
}
#News-Area .content {
  width: 760px;
}


#News-Area .btn-more {
  display: flex;
  justify-content: end;
  margin: 1em 0;
  width: 100%;
}

#News-Area .btn-more a {
  text-decoration: underline;
  color: #fff;
  background: var(--blue);
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
  border: none;
  border-radius: 100px;
  box-sizing: border-box;
  display: block;
  padding: 2rem 4rem;
  position: relative;
  min-width: 300px;
  text-decoration: none;
}
#News-Area .btn-more a::after {
  content: "";
  background: url(../images/ico_arrow_square_w.svg) no-repeat center center/contain;
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 2.4rem;
  transform: translateY(-50%);
}



@media screen and (max-width:768px) {
  #News-Area .flex {
    flex-direction: column;
  }
  #News-Area .flex h2 {
    text-align: center;
    margin-right: 0;
    margin: 0 auto;
  }
  #News-Area .content {
    width: 100%;
    margin-top: 30px;
  }

  #News-Area .btn-more {
    justify-content: center;
  }
}


/*==============================================================
SNS
==============================================================*/
#Sns-Area {
  padding-top: var(--m80);
  padding-bottom: var(--m80);
}

#Sns-Area .Sns_insta img{
  max-width: 800px;
  margin: 0 auto;
}

#Sns-Area .Sns_youtube{
  max-width: 600px;
  margin: 0 auto;
  margin-top: var(--m60);
}

#Sns-Area .Sns_youtube .Sns_youtube_content {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#Sns-Area .Sns_youtube .Sns_youtube_content iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


#Sns-Area .Sns_youtube img.comingsoon{
  max-width: 600px;
  margin: 0 auto;
}


/*==============================================================
私たちの取り組み
==============================================================*/
#OurEforts-Area {
  padding-top: var(--m100);
  padding-bottom: var(--m100);
  background: var(--blue);
  color: #fff;
}
#OurEforts-Area .flex {
  display: flex;
}
#OurEforts-Area .content {
  margin-top: var(--m60);
}
#OurEforts-Area .content .left {
  width: 50%;
  margin-right: 60px;
}
#OurEforts-Area .content .left span {
  display: block;
  width: 100%;
  /*height: 598px;*/
  height: calc((630 / 1920) * 100vw);
  background: url("../images/oureforts-left.png") no-repeat;
  background-size: contain;
  background-position: top 0 left 0;
}
@media screen and (min-width:769px) and (max-width:1280px) {
  #OurEforts-Area .content .left span {
    height: 410px;
  }
}
@media screen and (max-width:768px) {
  #OurEforts-Area .content .left span {
    height: 60vw;
  }
}
#OurEforts-Area .content .right {
  width: 50%;
  max-width: 600px;
  padding-right: 20px;
}
#OurEforts-Area .content .right p {
  margin-top: var(--m40);
}
#OurEforts-Area .content .right .item {
  margin-top: var(--m40);
}
#OurEforts-Area .content .right .item dl + dl {
  margin-top: 20px;
}
#OurEforts-Area .content .right .item dl dt {
  background: #fff;
  color: var(--blue);
  padding: 3px 20px;
  border-radius: 999px;
  display: inline-block;
  font-weight: bold;
}
#OurEforts-Area .content .right .item dl dd {
  margin-top: .3em;
}
@media screen and (max-width:768px) {
  #OurEforts-Area .flex {
    flex-direction: column;
  }
  #OurEforts-Area .content .left {
    width: 100%;
    margin-right: 0;
  }
  #OurEforts-Area .content .right {
    width: 100%;
    padding: 20px 20px 0;
  }
  #OurEforts-Area .content .right .item dl dt {
    width: 100%;
    text-align: center;
  }
}
/*---------SDGs------------*/
#OurEforts-Area .content.sdgs {
  margin-top: var(--m100);
}
#OurEforts-Area .content.sdgs h3 {
  text-align: center;
}
#OurEforts-Area .content.sdgs img.sdgs-img {
  margin-top: var(--m60);
}
#OurEforts-Area .content.sdgs dl {
  margin-top: var(--m60);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#OurEforts-Area .content.sdgs dl dt {
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 5px 20px;
  display: inline;
  margin-bottom: 1em;
}
#OurEforts-Area .content.sdgs dl dd {
  margin-top: .5em;
}
/*==============================================================
みらいサーモンについて
==============================================================*/
#AboutMiraiSalmon-Area {
  padding-top: var(--m100);
}
#AboutMiraiSalmon-Area .about {
  padding-bottom: var(--m100);
}
#AboutMiraiSalmon-Area .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#AboutMiraiSalmon-Area .flex .left {
  padding-right: 20px;
}
#AboutMiraiSalmon-Area .flex .left .miraisalmon-logo {
  width: 120px;
}
#AboutMiraiSalmon-Area .flex .left h4 {
  margin-top: var(--m50);
}
#AboutMiraiSalmon-Area .flex .left p {
  margin-top: var(--m40);
}
#AboutMiraiSalmon-Area .flex .right .miraisalmon-img {
  max-width: 660px;
}
@media screen and (max-width:768px) {
  #AboutMiraiSalmon-Area .flex {
    flex-direction: column;
  }
  #AboutMiraiSalmon-Area .flex .left {
    padding-right: 0;
    margin-top: 30px;
  }
  #AboutMiraiSalmon-Area .flex .left .miraisalmon-logo {
    margin: 0 auto;
  }
  #AboutMiraiSalmon-Area .flex .right .miraisalmon-img {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
  }
}
/*--------選ばれる理由----------*/
#AboutMiraiSalmon-Area .reason {
  padding-top: var(--m100);
  padding-bottom: var(--m100);
  background: url("../images/reason-bg.png"), #002e49;
  background-position: top center;
  background-size: cover;
}
#AboutMiraiSalmon-Area h3 {
  color: #fff;
  text-align: center;
}
@media screen and (min-width:769px) { /*PCのみ表示*/
  #AboutMiraiSalmon-Area h3 span {
    padding: 0 45px;
    background: url("../images/reason-ttl-bg-l.png"), url("../images/reason-ttl-bg-r.png");
    background-repeat: no-repeat;
    background-position: left top 10px, right top 10px;
  }
}
#AboutMiraiSalmon-Area .reason .r-content {
  margin-top: var(--m100);
}
#AboutMiraiSalmon-Area .reason .r-content .item {
  width: calc(50% - 40px);
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .7);
  position: relative;
}
#AboutMiraiSalmon-Area .reason .r-content .item:nth-of-type(n+2) {
  margin-top: var(--m80);
  ;
}
#AboutMiraiSalmon-Area .reason .r-content .item .num {
  position: absolute;
  top: -30px;
  left: 20px;
}
#AboutMiraiSalmon-Area .reason .r-content .item .txt {
  padding: 30px 40px;
}
#AboutMiraiSalmon-Area .reason .r-content .item .txt h4 {
  color: var(--blue);
}
#AboutMiraiSalmon-Area .reason .r-content .item .txt p {
  margin-top: 20px;
}
@media screen and (max-width:768px) {
  #AboutMiraiSalmon-Area .reason .r-content .item {
    width: 100%;
  }
  #AboutMiraiSalmon-Area .reason .r-content .item .num {
    width: 70px;
  }
  #AboutMiraiSalmon-Area .reason .r-content .item .txt {
    padding: 20px;
  }
  #AboutMiraiSalmon-Area .reason .r-content .item .txt p {
    margin-top: 5px;
  }
}

/*--------モニター調査でわかった みらいサーモンの評価----------*/
#AboutMiraiSalmon-Area .monitor{
  background: #002e49; 
  padding-bottom: var(--m100);
  line-height: 1.6;
}

#AboutMiraiSalmon-Area .monitor .flex{
  display: flex;
  align-items: stretch;
  margin-top:var(--m60);
}

#AboutMiraiSalmon-Area .monitor .flex .left{
  width: 420px;
  padding: var(--m60);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
}

#AboutMiraiSalmon-Area .monitor .flex .left::before{
  content: "";
  background: url("../images/clip.png") no-repeat;
  width: 36px;
  height: 67px;
  background-size: contain;
  position: absolute;
  top:-40px;
  left:25px;
}

#AboutMiraiSalmon-Area .monitor .flex .left p{
  font-size: 1.6rem;
  margin-top:20px;
}

#AboutMiraiSalmon-Area .monitor .flex .left aside{
  margin-top: auto;
  margin-bottom: 0;
}

#AboutMiraiSalmon-Area .monitor .flex .left aside dl{
  font-size: 1rem;
  display: flex;
}


#AboutMiraiSalmon-Area .monitor .flex .right{ 
  width: 980px;
  padding: var(--m60);
  display: flex;
  background: #fff;
  justify-content: space-between;
  background-image:
  repeating-linear-gradient(
    90deg,
    #f5f5f5 ,
    #f5f5f5 1px,
    transparent 1px,
    transparent 15px
  ),
  repeating-linear-gradient(
    0deg,
    #f5f5f5 ,
    #f5f5f5 1px,
    #fff 1px,
    #fff 15px
  );
}

#AboutMiraiSalmon-Area .monitor .flex .right .right_q{
  width: calc(50% - 30px);
} 

#AboutMiraiSalmon-Area .monitor .flex .right .right_q .question{
  border-bottom: 1px solid #007bc6; 
  padding-bottom: 10px;
  font-weight: bold;

}

#AboutMiraiSalmon-Area .monitor .flex .right .right_q figure{
  margin-top:20px;
  text-align: center;
}

#AboutMiraiSalmon-Area .monitor .flex .right .right_q figure img.graph-1{
  max-width: 257px;
}

#AboutMiraiSalmon-Area .monitor .flex .right .right_q figure img.graph-2{
  max-width: 257px;
  padding-top: 17px;
}

#AboutMiraiSalmon-Area .monitor .flex .right .right_q p.right_q_ans-summary{
  display: block;
  width: 100%;
  padding: 10px;
  border:solid 1px #858585;
  text-align: center;
  margin-top:20px;
  color: #ed1c24;
  font-weight: bold;
  background: #fff;
}

#AboutMiraiSalmon-Area .monitor .flex .right .right_q p.right_q_ans-detail{
  margin-top: 20px;
}

#AboutMiraiSalmon-Area .monitor .flex .right .right_q p.right_q_ans-detail span{
  color: #ed1c24;
}


@media screen and (max-width:768px) {
  #AboutMiraiSalmon-Area .monitor .flex{
    flex-direction: column;
    width: 100%;
  }
  #AboutMiraiSalmon-Area .monitor .flex .left{
    width: 100%;
  }
  #AboutMiraiSalmon-Area .monitor .flex .left aside{
    margin-top:20px;
  }
  #AboutMiraiSalmon-Area .monitor .flex .right{
    flex-direction: column;
    width: 100%;
  }
  
  #AboutMiraiSalmon-Area .monitor .flex .right .right_q{
    width: 100%;
  }
  
  #AboutMiraiSalmon-Area .monitor .flex .right .right_q + .right_q{
    margin-top:20px;
  }
}


/*==============================================================
企業情報
==============================================================*/
#CompanyInformation-Area {
  padding-top: var(--m100);
  background: url("../images/company-bg-left.png"), url("../images/company-bg-right.png");
  background-position: top left, bottom right;
  background-repeat: no-repeat;
}
#CompanyInformation-Area h2 {
  background: rgba(255, 255, 255, .6);
}
/*---------plan---------*/
#CompanyInformation-Area .plan {
  margin-top: var(--m60);
}
#CompanyInformation-Area .plan .lead {
  background: rgba(255, 255, 255, .6);
  margin-top: var(--m40);
}
#CompanyInformation-Area .plan .lead h4 {
  text-align: center;
}
#CompanyInformation-Area .plan .lead p {
  text-align: center;
  margin-top: 20px;
}
@media screen and (max-width:768px) {
  #CompanyInformation-Area .plan .lead p {
    text-align: left;
  }
}
/*---------phase---------*/
#CompanyInformation-Area .plan .phase {
  margin-top: var(--m60);
  padding-bottom: var(--m100);
}
#CompanyInformation-Area .plan .phase .item {
  display: flex;
}
#CompanyInformation-Area .plan .phase .item + .item {
  margin-top: var(--m60);
}
#CompanyInformation-Area .phase .item figue {
  width: calc(50% - 40px);
  flex-shrink: 0;
}
#CompanyInformation-Area .plan .phase .item .txt {
  margin-left: 40px;
  margin-top: 20px;
  background: rgba(255, 255, 255, .6);
}
#CompanyInformation-Area .plan .phase .item .txt h5 span {
  display: block;
  width: 150px;
  color: var(--blue);
  padding: 0 20px;
  border-radius: 999px;
  border: solid 1px var(--blue);
  text-align: center;
  margin-bottom: 5px;
  background: #fff;
}
#CompanyInformation-Area .plan .phase .item .txt p {
  margin-top: 10px;
}
@media screen and (max-width:768px) {
  #CompanyInformation-Area .plan .phase .item {
    flex-direction: column;
  }
  #CompanyInformation-Area .plan .phase .item figue {
    width: 100%;
  }
  #CompanyInformation-Area .plan .phase .item .txt {
    margin-left: 0;
  }
}
/*---------企業理念----------*/
#CompanyInformation-Area .philosophy {
  background: #f5f5f5;
  padding-top: var(--m80);
  padding-bottom: var(--m80);
}
#CompanyInformation-Area .philosophy .item {
  margin-top: var(--m60);
}
#CompanyInformation-Area .philosophy .item h4 {
  background: #fff;
  text-align: center;
  border-radius: 999px;
  border: 1px solid var(--blue);
}
#CompanyInformation-Area .philosophy .item h4 span {
  color: var(--blue);
  padding-right: 20px;
}
#CompanyInformation-Area .philosophy .item h5 {
  text-align: center;
  margin-top: var(--m30);
  color: var(--blue);
}
#CompanyInformation-Area .philosophy .item p {
  text-align: center;
  margin-top: 10px;
}
#CompanyInformation-Area .philosophy .item p + h5 {
  margin-top: var(--m30);
}
@media screen and (max-width:768px) {
  #CompanyInformation-Area .philosophy .item p {
    text-align: left;
  }
}
/*---------会社概要----------*/
#CompanyInformation-Area .profile {
  padding-top: var(--m80);
  padding-bottom: var(--m80);
  background: #fff;
}
#CompanyInformation-Area .profile .profile_logo {
  max-width: 144px;
  margin: 0 auto;
  margin-top: var(--m60);
}
#CompanyInformation-Area .profile .content {
  margin-top: var(--m40);
}
#CompanyInformation-Area .profile .content dl {
  border-top: 1px solid #ccc;
  display: flex;
  padding: 20px 40px;
  align-items: center;
}
#CompanyInformation-Area .profile .content dl:last-of-type {
  border-bottom: 1px solid #ccc;
}
#CompanyInformation-Area .profile .content dl dt {
  flex: 2;
  margin-right: 20px;
}
#CompanyInformation-Area .profile .content dl dd {
  flex: 3;
}
#CompanyInformation-Area .profile .content .logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: var(--m40);
}
#CompanyInformation-Area .profile .content .logo img {
  width: calc(50% - 10px);
  display: block;
  max-width: 390px;
}
@media screen and (max-width:768px) {
  #CompanyInformation-Area .profile .content dl {
    flex-direction: column;
    padding: 0;
  }
  #CompanyInformation-Area .profile .content dl dt {
    margin-right: 0;
    background: #f5f5f5;
    width: 100%;
    text-align: center;
    padding: 3px;
  }
  #CompanyInformation-Area .profile .content dl dd {
    padding: 3px 3px 10px;
    text-align: center;
  }
  #CompanyInformation-Area .profile .content .logo {
    flex-direction: column;
    align-items: center;
  }
  #CompanyInformation-Area .profile .content .logo img {
    width: 100%;
  }
}
/*==============================================================
お問い合わせ
==============================================================*/
#Contact-Area {
  background: var(--blue);
  padding-top: var(--m100);
  padding-bottom: var(--m100);
}
#Contact-Area ul {
  color: #fff;
  margin-top: var(--m60);
}
#Contact-Area ul li {
  text-indent: -1em;
  padding-left: 1em;
}
#Contact-Area .form-wrap {
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
  margin-top: var(--m60);
}
#Contact-Area .form-wrap dl {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}
#Contact-Area .form-wrap dl dt {
  font-size: 2rem;
  line-height: 1.2;
}
#Contact-Area .form-wrap dl dt .essential {
  color: #fff000;
  font-size: 1.2rem;
  margin-left: .5em;
  font-weight: bold;
}
#Contact-Area .form-wrap dl dd {
  margin-left: 10px;
  width: 390px;
}
#Contact-Area .form-wrap .error-message {
  font-size: 1.2rem;
  color: #fff000;
}
#Contact-Area .form-wrap input[type="text"], input[type="tel"], input[type="email"], textarea {
  vertical-align: middle;
  width: 100%;
  border: none;
  padding: 5px 10px;
  line-height: 2;
  font-size: 1.4rem;
  box-sizing: border-box;
  border-radius: 4px;
}
#Contact-Area .privacycnt {
  text-align: center;
  margin-top: var(--m80);
}
#Contact-Area input[type="checkbox"] {
  accent-color: red;
  width: 20px;
  height: 20px;
}
#Contact-Area a {
  color: #ffff00;
  text-decoration: underline;
}
#Contact-Area .contactBtn {
  text-align: center;
  margin-top: var(--m40);
}

#Contact-Area .contactBtn input{
  margin: 0 auto;
}

#Contact-Area .contactBtn:hover{
  opacity: .8;
}


@media screen and (max-width:768px) {
  #Contact-Area .form-wrap dl {
    flex-direction: column;
    padding: 10px 0;
  }
  #Contact-Area .form-wrap dl dt {
    font-size: 1.6rem;
  }
  #Contact-Area .form-wrap dl dd {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }
}
/*==============================================================
フッター
==============================================================*/
footer {
  position: relative;
}
footer a {
  display: block;
  width: 62px;
  height: 62px;
  position: absolute;
  top: -62px;
  right: 20px;
}
footer p.copyright {
  text-align: center;
  font-size: 1.2rem;
  padding: 5px;
}
@media screen and (max-width:768px) {
  footer a {
    display: block;
    width: 30px;
    height: 30px;
    top: -30px;
  }
  footer p.copyright {
    font-size: 1rem;
  }
}
/*==============================================================
==============================================================


プライバシーポリシー


==============================================================
==============================================================*/
#privacy-page {
  background: #EAEDF5;
}
#privacy-page .breadcrumbs {
  padding-top: 20px;
  padding-left: 20px;
  font-size: 1.4rem;
}
#privacy-page .breadcrumbs ul li {
  display: inline-block;
}
#privacy-page .breadcrumbs ul li span {
  margin: 0 0.5em;
}
#privacy-page a {
  color: var(--blue);
  text-decoration: underline;
}
#privacy-page section {
  padding-top: var(--m100);
  padding-bottom: var(--m100);
}
#privacy-page section h2 {
  text-align: center;
  color: var(--blue);
}
#privacy-page section p {
  margin-top: var(--m60);
}
#privacy-page section dl {
  margin-top: var(--m60);
}
#privacy-page section dl dt {
  font-size: 2.4rem;
  font-family: 'Noto Serif JP', serif;
}
#privacy-page section dl dd {
  margin-top: .5em;
}
@media screen and (max-width:768px) {
  #privacy-page section dl dt {
    font-size: 2rem;
  }
}
#privacy-page section p.t-right {
  text-align: right;
}
/*==============================================================
==============================================================


404
 

==============================================================
==============================================================*/
#notfound-page section {
  background: #EAEDF5;
  height: 90vh;
  padding-top: var(--m100);
  padding-bottom: var(--m100);
}
#notfound-page section h2 {
  max-width: 544px;
  margin: 0 auto;
}
#notfound-page section p {
  margin-top: var(--m60);
}
/*==============================================================
==============================================================


送信内容確認ページ
 

==============================================================
==============================================================*/
#confirm-page {
  background: #EAEDF5;
  padding-top: var(--m100);
  padding-bottom: var(--m100);
  min-height: 120vh;
}
#confirm-page h2 {
  text-align: center;
  color: var(--blue);
}
#confirm-page h2 + p {
  margin-top: var(--m60);
}
#confirm-page form {
  margin-top: var(--m60);
}
#confirm-page dl {
  margin-top: 20px;
  display: flex;
}
#confirm-page dt {
  flex: 2;
  color: var(--blue);
}
#confirm-page dd {
  font-weight: bold;
  margin-left: 2em;
  flex: 4;
}
#confirm-page .form-list {
  margin-top: 60px;
  display: flex;
  align-items: baseline;
  column-gap: 10px;
}
#confirm-page .form-list li:hover {
  opacity: .8;
}
#confirm-page .form-list li {
  text-align: center;
}

#confirm-page .form-list li input{
  width: 100%;
  max-width: 280px;
}

@media screen and (max-width:768px) {
  #confirm-page dl {
    flex-direction: column;
  }
  #confirm-page dd {
    margin-left: 0;
  }
  #confirm-page .form-list {
  justify-content: center;
  }

  #confirm-page .form-list li input{
   max-width: 150px;
  }
}
/*==============================================================
==============================================================


送信完了ページ
 

==============================================================
==============================================================*/
#complete-page {
  background: #EAEDF5;
  height: 90vh;
  padding-top: var(--m100);
  padding-bottom: var(--m100);
}
#complete-page h2 {
  text-align: center;
  color: var(--blue);
}
#complete-page p {
  margin-top: var(--m60);
}

#complete-page .contactBtn{
  max-width: 280px;
  margin: 10% auto 0 auto;
}


#notfound-page .btn {
  width: 300px;
  margin: 0 auto;
  margin-top: var(--m60);
  background: var(--blue);
  border-radius: 999px;
  text-align: center;
  position: relative;
}
#notfound-page .btn::after {
  content: "";
  background: url("../images/contact_arrow-white.png") no-repeat;
  width: 11px;
  height: 10px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
 #notfound-page .btn a {
  color: #fff;
  display: block;
  padding: 20px;
}

#notfound-page .btn:hover {
  opacity: .8;
}


@media screen and (max-width:768px) {
  #notfound-page .btn {
    width: 100%;
  }
}








/*==============================================================
==============================================================


送信内容確認ページ
 

==============================================================
==============================================================*/




#news-page {
    /*background: #EAEDF5;*/
  }
  .breadcrumbs {
    padding-top: 20px;
    padding-left: 20px;
    font-size: 1.4rem;
  }
  .breadcrumbs ul li {
    display: inline-block;
  }
  .breadcrumbs ul li span {
    margin: 0 0.5em;
  }
  #news-page section {
    padding-top: var(--m40);
    padding-bottom: var(--m60);
  }
  #news-page section h2.serif {
    text-align: center;
    color: var(--blue);
    margin-bottom:  var(--m60);
  }
  

.page-ttl {
    background: #EFEFEF;
    font-size: 3.7rem;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.08em;
    padding: 7.2rem 1.6rem;
    position: relative;
    margin-bottom: 2.4rem
}

.page-ttl .ttl {
    position: relative;
    padding-bottom: 2.8rem
}

.page-ttl .ttl:after {
    content: "";
    background: var(--blue);
    display: block;
    width: 12rem;
    height: 0.9rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0
}

.page-ttl span {
    font-size: 2rem;
    letter-spacing: 0.1em;
    display: block;
    margin-top: 0.8rem
}

@media only screen and (max-width:768px) {
    .page-ttl {
        font-size: 2.7rem
    }
}

.ttl-large {
    font-size: 3.2rem;
    font-weight: bold;
    padding: 1.6rem 0;
    margin: 6.4rem 0 2.4rem;
    position: relative
}

.ttl-large:after {
    content: "";
    background: var(--blue);
    display: block;
    width: 6rem;
    height: 0.2rem;
    position: absolute;
    left: 0;
    bottom: 0
}

@media only screen and (max-width:768px) {
    .ttl-large {
        margin: 4.8rem 0 2.4rem
    }
}

@media only screen and (max-width:768px) {
    .ttl-large {
        font-size: 2.6rem
    }
}

.ttl-small {
    font-size: 2.6rem;
    font-weight: bold;
    margin: 4rem 0 2.4rem
}

@media only screen and (max-width:768px) {
    .ttl-small {
        font-size: 2.2rem
    }
}

.ttl-border-b {
    color: var(--blue);
    border-bottom: 4px solid var(--blue);
    font-size: 2rem;
    font-weight: bold;
    padding: 1.6rem 0;
    margin: 2.4rem 0
}

@media only screen and (max-width:768px) {
    .ttl-border-b {
        font-size: 1.8rem
    }
}

.ttl-border-l {
    border-left: 7px solid var(--blue);
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0.8rem 1.6rem;
    margin: 2.4rem 0
}

@media only screen and (max-width:768px) {
    .ttl-border-l {
        font-size: 1.6rem
    }
}

a.btn-base,
button.btn-base {
    color: #fff;
    background: var(--blue);
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 100px;
    box-sizing: border-box;
    display: block;
    padding: 2.4rem 4rem;
    position: relative;
    min-width: 300px
}

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

    a.btn-base,
    button.btn-base {
        width: 100%;
        margin: 0 auto;
        min-width: auto
    }
}

a.btn-base:hover,
button.btn-base:hover {
    opacity: 0.7
}

a.btn-base.normal,
button.btn-base.normal {
    font-size: 1.6rem;
    font-weight: normal;
    padding: 1.6rem 3.2rem
}

a.btn-base.back:before,
button.btn-base.back:before {
    content: "";
    background: url(/images/ico_arrow_square_w.svg) no-repeat center center/contain;
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 2.4rem;
    transform: translateY(-50%) rotate(180deg)
}

a.btn-base.arrow:after,
button.btn-base.arrow:after {
    content: "";
    background: url(/images/ico_arrow_square_w.svg) no-repeat center center/contain;
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 2.4rem;
    transform: translateY(-50%)
}

a.btn-base.border,
button.btn-base.border {
    color: #323131;
    background: #FFF;
    border: 1px solid #B5B5B5
}

a.btn-base.border:after,
button.btn-base.border:after {
    background: url(/images/ico_arrow_square.svg) no-repeat center center/contain
}

a.btn-base.clear,
button.btn-base.clear {
    color: #5E606E;
    background: #FFF;
    vertical-align: middle;
    border: 1px solid #B5B5B5
}

a.btn-base.print,
button.btn-base.print {
    color: #323131;
    background: #FFF;
    border: 1px solid #B5B5B5;
    position: relative
}

a.btn-base.print:before,
button.btn-base.print:before {
    content: "";
    width: 2.4rem;
    min-width: 2.4rem;
    height: 2.6rem;
    display: inline-block;
    background: url(/images/ico_print.svg) no-repeat center center/contain;
    position: absolute;
    left: 2.4rem;
    top: 50%;
    transform: translateY(-50%)
}

a.btn-base.grayout,
button.btn-base.grayout {
    background: #DFDFDF;
    pointer-events: none
}

a.btn-base.edit,
button.btn-base.edit {
    color: #323131;
    background: #EEEEEE
}

a.btn-base.edit:after,
button.btn-base.edit:after {
    content: "";
    background: url(/images/ico_arrow_square.svg) no-repeat center center/contain;
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 2.4rem;
    transform: translateY(-50%) rotate(180deg)
}

a.btn-base.search,
button.btn-base.search {
    display: flex;
    align-items: center;
    justify-content: center
}

a.btn-base.search:before,
button.btn-base.search:before {
    content: "";
    width: 1.2em;
    min-width: 1.2em;
    height: 1.2em;
    display: inline-block;
    background: url(/images/ico_search_w.svg) no-repeat center center/contain;
    margin-right: 1.6rem
}

.ico-new {
    color: #FFF;
    background: #D50000;
    border: 1px solid #D50000;
    border-radius: 100px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    padding: 0.20rem 1.2rem 0.25rem;
    margin: 0 0.8rem 0 1.6rem;
    position: relative
}

@media only screen and (max-width:768px) {
    .icon-new {
        margin: 0 0.8rem 0 0.8rem
    }
}

.category {
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 100px;
    font-size: 1.2rem;
    text-align: center;
    display: inline-block;
    padding: 0.20rem 1.2rem 0.25rem;
    margin: 0 0.8rem 0.8rem 0;
    font-weight: bold;
}

.category.color01 {
    color: #FFF;
    background: #111111;
    border-color: #111111
}

.category.color02 {
    color: #0568BE;
    background: #FFF;
    border-color: #A3A3A3
}

.category.color03 {
    color: #DD2E24;
    background: #FFF;
    border-color: #A3A3A3
}

.category.color04 {
    color: #85144B;
    background: #FFF;
    border-color: #A3A3A3
}

.category.color05 {
    color: #B10DC9;
    background: #FFF;
    border-color: #A3A3A3
}

.category.color06 {
    color: #D71BAC;
    background: #FFF;
    border-color: #A3A3A3
}

.category.color07 {
    color: #FFF;
    background: #B10DC9;
    border-color: #B10DC9
}

.category.color08 {
    color: #FFF;
    background: #85144B;
    border-color: #85144B
}

.category.color09 {
    color: #FFF;
    background: #DD2E24;
    border-color: #DD2E24
}

.category.color10 {
    color: #FFF;
    background: #0568BE;
    border-color: #0568BE
}

.category.color11 {
    color: #111111;
    background: #F012BE;
    border-color: #F012BE
}

.category.color12 {
    color: #111111;
    background: #FFDC00;
    border-color: #FFDC00
}

.category.color13 {
    color: #111111;
    background: #FF851B;
    border-color: #FF851B
}

.category.color14 {
    color: #111111;
    background: #63CCFF;
    border-color: #63CCFF
}

.category.color15 {
    color: #111111;
    background: #39CCCC;
    border-color: #39CCCC
}

.category.color16 {
    color: #111111;
    background: #3D9970;
    border-color: #3D9970
}

.category.color17 {
    color: #111111;
    background: #2ECC40;
    border-color: #2ECC40
}

.category.color18 {
    color: #111111;
    background: #DB8D66;
    border-color: #DB8D66
}

.category.color19 {
    color: #111111;
    background: #E5E8EB;
    border-color: #E5E8EB
}

.category.color20 {
    color: #111111;
    background: #F3DAAA;
    border-color: #F3DAAA
}

.list-icon {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start
}

.list-icon .icon-new {
    margin: 0 0.8rem 0.8rem 0
}

.list-icon a:hover {
    opacity: 0.7
}

.badge {
    font-size: 1.6rem;
    text-align: center;
    line-height: 4rem;
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    z-index: 2
}

.badge.new {
    color: #FFF;
    background: #20A0C7
}

.badge.open {
    color: #FFF;
    background: var(--blue)
}

.badge.close {
    color: #FFF;
    background: #4E4E4E
}

.badge.rank {
    color: #FFF;
    background: var(--blue)
}

.bg-c {
    padding: 3.2rem 0;
    margin-bottom: 3.2rem
}

@media only screen and (max-width:768px) {
    .bg-c {
        padding: 1.6rem 0
    }
}

.bg-c.inside {
    padding: 3.2rem
}

@media only screen and (max-width:768px) {
    .bg-c.inside {
        padding: 1.6rem
    }
}

.bg-c.gray {
    background: #EEEEEE
}

.bg-c.white {
    background: #FFF
}

ol.list-num {
    margin: 1.6rem 0
}

ol.list-num li {
    text-indent: -1.9em;
    padding-left: 2em;
    list-style-type: none;
    counter-increment: cnt;
    margin-bottom: 0.8rem
}

ol.list-num li:before {
    content: "(" counter(cnt) ")";
    margin-right: 0.8rem
}

.list-circle {
    list-style: disc;
    margin: 1.6rem 0
}

.list-circle li {
    margin-left: 1.5em;
    margin-bottom: 0.8rem
}

.list-square {
    margin: 1.6rem 0
}

.list-square li {
    padding-left: 1.5em;
    list-style-type: none;
    position: relative;
    margin-bottom: 0.8rem
}

.list-square li:before {
    content: "";
    background: var(--blue);
    width: 1rem;
    height: 1rem;
    display: inline-block;
    position: absolute;
    top: 0.45em;
    left: 0.4rem
}

.list-mark {
    position: relative;
    padding-left: 1.5em;
    margin: 1.6rem 0
}

.list-mark li {
    margin-bottom: 0.8rem
}

.list-mark li .mark {
    position: absolute;
    left: 0
}

.breadCrumbs {
    width: 1080px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 1.6rem
}

@media only screen and (max-width:1380px) {
    .breadCrumbs {
        width: 94%;
        max-width: 1080px
    }
}

@media only screen and (max-width:1100px) {
    .breadCrumbs {
        width: 92%
    }
}

.breadCrumbs ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.breadCrumbs ul li {
    font-size: 1.4rem;
    vertical-align: middle;
    margin-right: 1.6rem;
    display: inline-block
}

@media only screen and (max-width:768px) {
    .breadCrumbs ul li {
        font-size: 1.3rem
    }
}

.breadCrumbs ul li a {
    vertical-align: middle;
    text-decoration: underline;
    margin-right: 0.8em
}

.breadCrumbs ul li a[aria-current] {
    text-decoration: none
}

.breadCrumbs ul li:after {
    content: "";
    background: url(/images/ico_arrow_radius.svg) no-repeat center center/contain;
    width: 0.5em;
    height: 0.8em;
    display: inline-block;
    vertical-align: middle
}

.breadCrumbs ul li:last-child:after {
    display: none
}

.conditions {
    display: flex;
    margin-bottom: 3.2rem
}

@media only screen and (max-width:768px) {
    .conditions {
        display: block
    }
}

.conditions .paging-result {
    float: right;
    font-weight: bold
}

.conditions dl {
    display: flex
}

@media only screen and (max-width:768px) {
    .conditions dl {
        width: 100%;
        display: block
    }
}

.conditions dl dt {
    white-space: nowrap
}

@media only screen and (max-width:768px) {
    .conditions dl dt {
        margin: 0 0 1.6rem 0
    }
}

.conditions dl dt:after {
    content: ":";
    display: inline-block;
    margin: 0 0.8rem
}

.conditions dl dd .list-conditions {
    display: flex;
    flex-wrap: wrap
}

.conditions dl dd .list-conditions li {
    margin: 0 0.8rem 0.8rem 0
}

.conditions dl dd .list-conditions li a,
.conditions dl dd .list-conditions li span {
    font-size: 1.2rem;
    border: 1px solid #B5B5B5;
    border-radius: 100px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    display: inline-block
}

.conditions dl dd .list-conditions li span {
    padding: 0.5rem 1.6rem
}

.conditions dl dd .list-conditions li a {
    padding: 0.5rem 3.2rem 0.5rem 1.6rem
}

.conditions dl dd .list-conditions li a:before {
    content: "";
    background: url(/images/ico_clear.svg) no-repeat center center/contain;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%)
}

@media only screen and (max-width:768px) {
    .conditions .btn-delete {
        text-align: right
    }
}

.conditions .btn-delete a {
    color: #fff;
    background: #323131;
    border-radius: 100px;
    font-size: 1.2rem;
    white-space: nowrap;
    padding: 0.5rem 3.2rem 0.5rem 1.6rem;
    margin: 0;
    display: block;
    position: relative
}

@media only screen and (max-width:768px) {
    .conditions .btn-delete a {
        margin: 0.8rem 0;
        display: inline-block
    }
}

.conditions .btn-delete a:before {
    content: "";
    background: url(/images/ico_clear_w.svg) no-repeat center center/contain;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
    z-index: 2
}

.sort-block {
    position: relative;
    text-align: right;
    margin-bottom: 2.4rem
}

.sort-block .ac-p {
    background: #fff;
    display: inline-block;
    position: relative;
    cursor: pointer
}

.sort-block .ac-p:before {
    content: "";
    background: url(/images/ico_sort.svg) no-repeat center center/contain;
    display: inline-block;
    width: 1.5rem;
    height: 1.3rem;
    margin-right: 0.8rem
}

.sort-block .ac-c {
    display: none;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.32);
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    z-index: 10;
    min-width: 9em
}

@media only screen and (max-width:768px) {
    .sort-block .ac-c {
        width: 100%
    }
}

.sort-block .ac-c a {
    color: #323131;
    text-align: left;
    padding: 1.6rem 1.6rem 1.6rem 3.2rem;
    border-top: 1px solid #EEEEEE;
    display: block;
    position: relative
}

.sort-block .ac-c a.active {
    background: #f5f5f5
}

.sort-block .ac-c a.active:before {
    content: "";
    background: url(/images/ico_sort_check.svg) no-repeat center center/contain;
    display: inline-block;
    width: 0.9rem;
    height: 0.7rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.6rem
}

.sort-block .ac-c a:hover {
    background: #f5f5f5
}

.count-disp {
    display: block;
    margin-bottom: 1.6rem
}

.count-disp.count-col {
    display: flex;
    justify-content: space-between
}

@media only screen and (max-width:768px) {
    .count-disp.count-col {
        display: block
    }
}

.paging {}

.paging .word {
    letter-spacing: 0.1em;
    margin-bottom: 1.6rem
}

.paging .word .count,
.paging .word .search-word {
    color: #323131;
    font-size: 2.4rem
}

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

    .paging .word .count,
    .paging .word .search-word {
        font-size: 2rem
    }
}

.paging .word .count {
    margin-right: 0.8rem
}

.paging .count {
    color: #707070;
    margin-bottom: 2.4rem
}

.paging .count span {
    margin: 0 0.8rem
}

.paging .pagingIn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap
}

@media only screen and (max-width:768px) {
    .paging .pagingIn {
        flex-wrap: nowrap;
        justify-content: center
    }
}

.paging .pagingIn.center {
    justify-content: center
}

.paging .pagingIn>span {
    margin-bottom: 0.8rem
}

.paging span a {
    color: #000;
    background: #EEEEEE;
    border-radius: 100px;
    display: inline-block;
    padding: 0.8rem 1.55rem;
    margin: 0 0.8rem
}

@media only screen and (max-width:768px) {
    .paging span a {
        display: none
    }
}

.paging span a:hover {
    color: #fff;
    background: var(--blue);
    opacity: 1
}

.paging span a:hover:before {
    background: url(/images/ico_arrow_square_w.svg) no-repeat center center/contain
}

.paging .current {
    color: #fff;
    background: var(--blue);
    display: inline-block;
    border-radius: 100px;
    padding: 0.8rem 1.55rem;
    margin: 0 0.8rem
}

@media only screen and (max-width:768px) {
    .paging .current {
        display: none
    }
}

.paging .next a,
.paging .prev a {
    padding: 0.8rem 2.4rem;
    position: relative
}

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

    .paging .next a,
    .paging .prev a {
        display: block
    }
}

.paging .next a:before,
.paging .prev a:before {
    content: "";
    background: url(/images/ico_arrow_square.svg) no-repeat center center/contain;
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.paging .prev a {
    padding-left: 4rem
}

.paging .prev a:before {
    left: 1.6rem;
    transform: translateY(-50%) rotateZ(180deg)
}

.paging .next a {
    padding-right: 4rem
}

.paging .next a:before {
    right: 1.6rem
}

.list-sns {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 2rem
}

@media only screen and (max-width:768px) {
    .list-sns {
        justify-content: center
    }
}

.list-sns li a {
    display: block;
    padding: 0.5em
}

.list-sns li img {
    width: 32px
}

.share-block {
    background: #f6f6f9;
    padding: 1.6rem;
    width: fit-content
}

@media only screen and (max-width:1300px) {
    .share-block {
        padding: 1.6rem
    }
}

@media only screen and (max-width:1100px) {
    .share-block {
        background: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        width: 100%;
        margin-bottom: 4rem
    }
}

.share-block .btn-bookmark {
    color: #323131;
    background: #fff;
    border: none;
    border-radius: 50%;
    text-align: center;
    width: 8rem;
    height: 8rem;
    word-break: keep-all;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 0.8rem;
    margin: 0 auto;
    margin-bottom: 2.4rem
}

@media only screen and (max-width:768px) {
    .share-block .btn-bookmark {
        width: 6rem;
        height: 6rem
    }
}

@media only screen and (max-width:1100px) {
    .share-block .btn-bookmark {
        margin: 0;
        border: 1px solid #B5B5B5
    }
}

@media only screen and (max-width:1300px) {
    .share-block .btn-bookmark img {
        width: 100%;
        max-width: 16px;
        display: block
    }
}

.share-block .btn-bookmark span {
    font-size: 1.3rem;
    font-weight: bold;
    display: block;
    width: 100%
}

@media only screen and (max-width:1100px) {
    .share-block>dl {
        display: flex;
        align-items: center
    }
}

.share-block>dl dt {
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.8rem;
    word-break: keep-all
}

@media only screen and (max-width:1100px) {
    .share-block>dl dt {
        margin: 0
    }
}

.share-block>dl dd .list-sns {
    flex-direction: column
}

@media only screen and (max-width:1100px) {
    .share-block>dl dd .list-sns {
        flex-direction: unset
    }
}

.share-block>dl dd .list-sns li {
    max-width: 3rem;
    margin: 0;
    margin-bottom: 2.4rem
}

.share-block>dl dd .list-sns li:last-child {
    margin: 0
}

@media only screen and (max-width:1100px) {
    .share-block>dl dd .list-sns li {
        margin: 0
    }
}

.share-block.side-btn {
    position: relative;
    left: 0;
    z-index: 11
}

@media only screen and (max-width:1100px) {
    .share-block.side-btn {
        position: relative !important;
        bottom: 0 !important
    }
}

.share-block.side-btn .list-sns li {
    max-width: none;
    margin-bottom: 0
}

.share-block.fixed {
    position: fixed
}

.tab-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.4rem
}

.tab-list>li {
    margin-right: 2%;
    flex: 1;
    display: flex
}

.tab-list>li:last-child {
    margin-right: 0
}

.tab-list>li a {
    color: #fff;
    background: #000;
    width: 100%;
    padding: 1.6rem;
    display: grid;
    place-content: center
}

@media only screen and (max-width:768px) {
    .tab-list>li a {
        font-size: 1.3rem
    }
}

@media only screen and (max-width:768px) {
    .tab-list>li a {
        padding: 0.8rem
    }
}

.tab-list>li a:hover {
    opacity: 0.7
}

.tab-article {
    display: flex;
    justify-content: center;
    margin-bottom: 4rem
}

.tab-article>li {
    margin-right: 2%;
    min-width: 6.5em;
    display: flex
}

.tab-article>li:last-child {
    margin-right: 0
}

.tab-article>li {
    border: 1px solid #B5B5B5;
    border-radius: 100px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem 1.6rem;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: .25s;
}

.tab-article>li.active,
.tab-article>li:hover {
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
}


.year_link {
  display: flex;
  margin-bottom: 4vw;
  flex-flow: row wrap;
}
@media only screen and (min-width: 768px), print {
  .year_link {
    margin-bottom: 40px;
    justify-content: center;
  }
}

.year_link li {
  margin-right: 2.66667vw;
  margin-bottom: 1.33333vw;
  position: relative;
}

@media only screen and (min-width: 768px), print {
  .year_link li {
    margin-right: 30px;
    margin-bottom: 10px;
  }
}

.year_link li a {
  position: relative;
  padding-right: 20px;
}

.year_link li a::after {
  content: "";
  background: url(/images/ico_arrow_radius_b.svg) no-repeat center center/contain;
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}


.tab-wrap {
    position: relative
}

.tab-wrap:before {
    content: "";
    background: #000;
    width: 106%;
    height: 2px;
    position: absolute;
    left: -3%;
    bottom: 0
}

@media only screen and (max-width:768px) {
    .tab-wrap:before {
        width: 100%;
        left: 0;
        overflow: auto
    }
}

.tab-wrap .tab-area {
    display: flex;
    justify-content: space-between
}

.tab-wrap .tab-area>li {
    margin-right: 2%;
    display: flex;
    flex: 1
}

@media only screen and (max-width:768px) {
    .tab-wrap .tab-area>li {
        margin: 0 2%
    }
}

.tab-wrap .tab-area>li:last-child {
    margin-right: 0
}

@media only screen and (max-width:768px) {
    .tab-wrap .tab-area>li:last-child {
        margin-right: 2%
    }
}

.tab-wrap .tab-area>li a {
    background: #B5B5B5;
    border: 2px solid #000;
    border-bottom: none;
    font-weight: bold;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem
}

@media only screen and (max-width:768px) {
    .tab-wrap .tab-area>li a {
        font-size: 1.4rem
    }
}

.tab-wrap .tab-area>li a.active {
    background: #fff;
    border: 2px solid #000;
    border-bottom: none;
    position: relative;
    z-index: 1
}

.tab-wrap .tab-area>li a:not(.active) {
    margin-bottom: 0.1rem
}

.tab-contents {
    padding: 2.4rem 0
}

.tab-contents>div {
    display: none
}

.tab-contents>div.active {
    display: block
}

@media only screen and (max-width:768px) {
    .sp-tab-btn {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .sp-tab-btn>li {
        flex: auto !important;
        margin-bottom: 2%
    }

    .sp-tab-btn.col2>li {
        width: 48%
    }

    .sp-tab-btn.col2>li:nth-child(2n) {
        margin-right: 0
    }

    .sp-tab-btn.col3>li {
        width: 31.3333333333%
    }

    .sp-tab-btn.col3>li:nth-child(3n) {
        margin-right: 0
    }

    .sp-tab-scroll {
        overflow: auto
    }

    .sp-tab-scroll>li {
        white-space: nowrap
    }
}

.btn-block {
    margin: 2.4rem 0 0;
    display: flex;
    flex-wrap: wrap
}

@media only screen and (max-width:768px) {
    .btn-block {
        display: block
    }
}

.btn-block button,
.btn-block p {
    margin: 0 1.2rem 2.4rem
}

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

    .btn-block button,
    .btn-block p {
        width: 90%;
        margin: 1.6rem auto
    }
}

.btn-block.center {
    justify-content: center
}

@media only screen and (max-width:768px) {
    .btn-block.center {
        display: block
    }
}

.btn-block.right {
    justify-content: flex-end
}

@media only screen and (max-width:768px) {
    .btn-block.right {
        display: block
    }
}

.btn-block.to-back {
    display: flex
}

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

    .btn-block.to-back button,
    .btn-block.to-back p {
        margin: 0.5em auto;
        width: 100%
    }
}

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

    .btn-block.to-back button,
    .btn-block.to-back p {
        width: 90%
    }
}

@media only screen and (max-width:768px) {
    .btn-block.to-back button {
        order: 1
    }

    .btn-block.to-back button.back,
    .btn-block.to-back button.clear,
    .btn-block.to-back button.edit {
        order: 2
    }

    .btn-block.to-back p {
        order: 2
    }
}

.btn-block.to-clear {
    display: flex
}

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

    .btn-block.to-clear button,
    .btn-block.to-clear p {
        margin: 0.5em auto;
        width: 100%
    }
}

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

    .btn-block.to-clear button,
    .btn-block.to-clear p {
        width: 90%
    }
}

@media only screen and (max-width:768px) {
    .btn-block.to-clear button {
        order: 1
    }

    .btn-block.to-clear button.back,
    .btn-block.to-clear button.clear,
    .btn-block.to-clear button.edit {
        order: 2
    }

    .btn-block.to-clear p {
        order: 2
    }
}

.sentence-block {
    margin-bottom: 4rem
}

.sentence-block.center {
    text-align: center
}

.sentence-block p {
    margin-bottom: 1.6rem
}

.sentence-block p.mb0 {
    margin-bottom: 0rem
}

.sentence-block p.indent {
    text-indent: 1em
}

.sentence-block a {
    text-decoration: underline
}

.scroll-text {
    background: #EEEEEE;
    border: 2px solid #000;
    border-radius: 20px;
    padding: 2.4rem 3.2rem;
    overflow: hidden;
    margin-bottom: 2.4rem
}

@media only screen and (max-width:768px) {
    .scroll-text {
        padding: 1.6rem
    }
}

.scroll-text>div {
    overflow-y: scroll;
    height: 160px;
    padding-right: 1em
}

@media only screen and (max-width:768px) {
    .scroll-text>div {
        height: 200px
    }
}

.scroll-text>div p:not(:first-child) {
    margin-top: 1em
}

.pht-single {
    text-align: center;
    margin-bottom: 2em
}

.pht-single.bnr-tumulus {
    margin-top: 3.5em
}

@media only screen and (max-width:768px) {
    .pht-single.bnr-tumulus {
        margin-top: 1em
    }
}

.block-lr {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.block-lr a {
    display: block
}

.block-lr>div {
    box-sizing: border-box
}

.block-lr.list-movie {
    margin: 3em 0 4em
}

@media only screen and (max-width:768px) {
    .block-lr.list-movie {
        margin: 1em 0 2em
    }
}

.block-lr.center>div {
    text-align: center
}

.block-lr.col2>div {
    width: 48%;
    margin: 0 4% 2em 0
}

.block-lr.col2>div:nth-child(2n) {
    margin-right: 0
}

.block-lr.col2.w-l03>div {
    width: 30%;
    margin: 0 3% 2em 0
}

.block-lr.col2.w-l03>div:nth-child(2n) {
    width: 67%;
    margin-right: 0
}

.block-lr.col2.w-l04>div {
    width: 40%;
    margin: 0 3% 2em 0
}

.block-lr.col2.w-l04>div:nth-child(2n) {
    width: 57%;
    margin-right: 0
}

.block-lr.col3>div {
    width: 31%;
    margin: 0 3.5% 2em 0
}

.block-lr.col3>div:nth-child(3n) {
    margin-right: 0
}

.block-lr.col4>div {
    width: 23%;
    margin: 0 2.6666666667% 2em 0
}

.block-lr.col4>div:nth-child(4n) {
    margin-right: 0
}

.block-lr.col5>div {
    width: 18%;
    margin: 0 2.5% 2em 0
}

.block-lr.col5>div:nth-child(5n) {
    margin-right: 0
}

@media only screen and (max-width:768px) {
    .block-lr.sp-col01>div {
        width: 100% !important;
        margin-right: 0
    }

    .block-lr.sp-col02>div {
        width: 47% !important;
        margin: 0 6% 2em 0 !important
    }

    .block-lr.sp-col02>div:nth-child(2n) {
        margin-right: 0 !important
    }

    .block-lr.sp-col03>div {
        width: 31% !important;
        margin: 0 3.5% 2em 0 !important
    }

    .block-lr.sp-col03>div:nth-child(3n) {
        margin-right: 0 !important
    }
}

.list-thumb {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.list-thumb a {
    display: block
}

.list-thumb.col2>li {
    width: 48%;
    margin: 0 4% 2em 0
}

.list-thumb.col2>li:nth-child(2n) {
    margin-right: 0
}

.list-thumb.col3>li {
    width: 31%;
    margin: 0 3.5% 2em 0
}

@media only screen and (max-width:768px) {
    .list-thumb.col3>li {
        margin-bottom: 0.8em
    }
}

.list-thumb.col3>li:nth-child(3n) {
    margin-right: 0
}

.list-thumb.col4>li {
    width: 23%;
    margin: 0 2.6666666667% 2em 0
}

.list-thumb.col4>li:nth-child(4n) {
    margin-right: 0
}

.list-thumb.col5>li {
    width: 18%;
    margin: 0 2.5% 2em 0
}

.list-thumb.col5>li:nth-child(5n) {
    margin-right: 0
}

@media only screen and (max-width:768px) {
    .list-thumb.sp-col01>li {
        width: 100% !important;
        margin-right: 0
    }

    .list-thumb.sp-col02>li {
        width: 47% !important;
        margin: 0 6% 0.8em 0 !important
    }

    .list-thumb.sp-col02>li:nth-child(2n) {
        margin-right: 0 !important
    }

    .list-thumb.sp-card>li {
        width: 100% !important;
        margin-right: 0
    }

    .list-thumb.sp-card>li a {
        display: flex;
        align-items: flex-start
    }

    .list-thumb.sp-card>li a>div.ph-part {
        width: 35%;
        min-width: 35%;
        margin: 0 5% 1.6rem 0
    }
}

@media only screen and (max-width:768px) and (max-width:768px) {
    .list-thumb.sp-card>li a>div.txt-part {
        padding: 0
    }
}

.list-thumb.ratio-1-1 .ph-part {
    aspect-ratio: 1/1 !important;
    object-fit: contain !important
}

.list-thumb.ratio-3-2 .ph-part {
    aspect-ratio: 3/2 !important;
    object-fit: contain !important
}

.list-thumb.ratio-3-4 .ph-part {
    aspect-ratio: 3/4 !important;
    object-fit: contain !important
}

.list-thumb.ratio-4-3 .ph-part {
    aspect-ratio: 4/3 !important;
    object-fit: contain !important
}

.list-thumb.ratio-16-9 .ph-part {
    aspect-ratio: 16/9 !important;
    object-fit: contain !important
}

.list-thumb li {
    position: relative
}

.list-thumb li a {
    width: 100%;
    position: relative
}

.list-thumb li a .ph-part,
.list-thumb li a .txt-part {
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box
}

.list-thumb li a .ph-part {
    background: #e2e5ec;
    border-radius: 20px;
    aspect-ratio: 4/3;
    object-fit: contain;
    margin-bottom: 1.6rem
}

.list-thumb li a .ph-part>img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: contain
}

@media (-ms-high-contrast:none) {
    .list-thumb li a .ph-part>img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.list-thumb li a .ph-part .add-parts>.txt-add {
    font-size: 1.4rem;
    background: #fff;
    width: 80%;
    padding: 0.8rem 1.6rem;
    opacity: 0;
    position: absolute;
    bottom: 4em;
    right: 0.6em;
    z-index: 2;
    display: block;
    transition: all 0.5s
}

.list-thumb li a .ph-part .add-parts>.txt-add:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1em 0.4em 0 0.4em;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    bottom: -0.9em;
    right: 0.8em;
    z-index: -1
}

@media only screen and (max-width:1100px) {
    .list-thumb li a .ph-part .add-parts>.txt-add:before {
        bottom: -10px
    }
}

.list-thumb li a .ph-part .add-parts>.btn-add {
    line-height: 1;
    padding: 0.5em;
    background: #fff;
    border: 1px solid #707070;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.5s;
    position: absolute;
    right: 0.5em;
    bottom: 0.5em
}

.list-thumb li a .ph-part .add-parts>.btn-add:focus+.txt-add,
.list-thumb li a .ph-part .add-parts>.btn-add:hover+.txt-add {
    display: block;
    opacity: 1
}

.list-thumb li a:hover .ph-part>img {
    transform: translate(-50%, -50%) scale(1.1)
}

.list-thumb li a .txt-part {
    padding: 0 0 1.6rem
}

.list-thumb li a .txt-part .date {
    font-size: 1.3rem;
    margin-bottom: 0.8rem
}

.list-thumb li a .txt-part .ttl {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.6rem
}

.list-thumb li a .txt-part .txt {
    font-size: 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.list-thumb li a .txt-part .calendar {
    font-size: 1.3rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.6rem
}

.list-thumb li a .txt-part .calendar:before {
    content: "";
    background: url(/images/ico_calendar.svg) no-repeat center center/contain;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 0.2rem;
    left: 0;
    z-index: 1
}

.list-thumb li a .txt-part .writer {
    display: flex;
    align-items: center;
    margin-bottom: 1.6rem
}

.list-thumb li a .txt-part .writer .w-ph {
    width: 50px;
    border-radius: 50%;
    margin-right: 1.6rem;
    overflow: hidden;
    aspect-ratio: 1/1;
    position: relative
}

.list-thumb li a .txt-part .writer .w-ph img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: cover
}

@media (-ms-high-contrast:none) {
    .list-thumb li a .txt-part .writer .w-ph img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.list-thumb li a .txt-part .writer .w-txt {
    font-size: 1.3rem
}

.list-thumb li .fav-part {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 1
}

.list-thumb li .fav-part .icon-fav {
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: url(/images/ico_btn_off.svg) no-repeat center/18px auto, #fff;
    border: 1px solid #707070;
    transition: 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 100%;
    padding: 0
}

.list-thumb li .fav-part .icon-fav.active {
    background: url(/images/ico_btn_on.svg) no-repeat center/18px auto, #fff;
    display: none
}

.list-thumb.ph-thumb>li {
    display: block
}

.list-thumb.ph-thumb>li .ph-part {
    border-radius: 20px;
    position: relative;
    aspect-ratio: 4/3;
    object-fit: contain;
    overflow: hidden
}

.list-thumb.ph-thumb>li .ph-part>img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: contain
}

@media (-ms-high-contrast:none) {
    .list-thumb.ph-thumb>li .ph-part>img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.list-thumb.ph-thumb>li .txt-part {
    padding: 1.6rem 0
}

.list-thumb.ph-thumb>li .txt-part .date {
    font-size: 1.3rem;
    margin-bottom: 0.8rem
}

.list-thumb.ph-thumb>li .txt-part .ttl {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.6rem
}

.list-thumb.ph-thumb>li .txt-part .txt {
    font-size: 1.4rem
}

.list-thumb.ph-thumb>li .txt-part .calendar {
    font-size: 1.3rem;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.6rem
}

.list-thumb.ph-thumb>li .txt-part .calendar:before {
    content: "";
    background: url(/images/ico_calendar.svg) no-repeat center center/contain;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 0.2rem;
    left: 0;
    z-index: 1
}

.list-rank {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.list-rank.ratio-1-1 .ph-part {
    aspect-ratio: 1/1 !important;
    object-fit: contain !important
}

.list-rank.ratio-3-2 .ph-part {
    aspect-ratio: 3/2 !important;
    object-fit: contain !important
}

.list-rank.ratio-3-4 .ph-part {
    aspect-ratio: 3/4 !important;
    object-fit: contain !important
}

.list-rank.ratio-4-3 .ph-part {
    aspect-ratio: 4/3 !important;
    object-fit: contain !important
}

.list-rank.ratio-16-9 .ph-part {
    aspect-ratio: 16/9 !important;
    object-fit: contain !important
}

.list-rank>li {
    width: 100%;
    position: relative;
    margin: 1.6rem 0
}

.list-rank>li:first-child {
    margin-top: 2.4rem
}

.list-rank>li .badge {
    position: absolute;
    top: -20px;
    left: 0
}

.list-rank>li a {
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start
}

.list-rank>li a .ph-part,
.list-rank>li a .txt-part {
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-sizing: border-box
}

.list-rank>li a .ph-part {
    background: #e2e5ec;
    border-radius: 10px;
    aspect-ratio: 4/3;
    object-fit: contain;
    width: 45%;
    min-width: 45%;
    margin-right: 2.4rem
}

.list-rank>li a .ph-part>img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: contain
}

@media (-ms-high-contrast:none) {
    .list-rank>li a .ph-part>img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.list-rank>li a:hover .ph-part>img {
    transform: translate(-50%, -50%) scale(1.1)
}

.list-rank>li a .txt-part .ttl {
    font-size: 1.6rem;
    font-weight: bold
}

.list-writer>li a {
    background: #EEEEEE;
    display: flex;
    align-items: center;
    padding: 2.4rem;
    margin-bottom: 1.6rem
}

.list-writer>li a .ph-part {
    width: 35%;
    min-width: 35%;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    position: relative;
    margin-right: 2.4rem
}

.list-writer>li a .ph-part img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: cover
}

@media (-ms-high-contrast:none) {
    .list-writer>li a .ph-part img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.list-writer>li a .txt-part .name {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 0.8rem
}

.list-writer>li a .txt-part .txt {
    font-size: 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.writer-block {
    background: #EEEEEE;
    display: flex;
    align-items: center;
    padding: 3.2rem 4rem;
    margin-bottom: 1.6rem
}

@media only screen and (max-width:768px) {
    .writer-block {
        display: block;
        padding: 2.4rem 1.6rem
    }
}

.writer-block .ph-part {
    width: 150px;
    min-width: 150px;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    position: relative;
    margin-right: 3.2rem
}

@media only screen and (max-width:768px) {
    .writer-block .ph-part {
        margin: 0 auto 2.4rem
    }
}

.writer-block .ph-part img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: cover
}

@media (-ms-high-contrast:none) {
    .writer-block .ph-part img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.writer-block .txt-part {
    width: calc(100% - 180px)
}

@media only screen and (max-width:768px) {
    .writer-block .txt-part {
        width: 100%
    }
}

.writer-block .txt-part .name {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.8rem
}

.writer-block .txt-part .txt {
    font-size: 1.4rem;
    margin-bottom: 2.4rem
}

.writer-block .btn-part {
    display: flex;
    flex-wrap: wrap
}

.writer-block .btn-part>button,
.writer-block .btn-part>p {
    width: 48%;
    margin: 0 4% 1.6rem 0
}

.writer-block .btn-part>button:nth-child(2n),
.writer-block .btn-part>p:nth-child(2n) {
    margin-right: 0
}

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

    .writer-block .btn-part>button,
    .writer-block .btn-part>p {
        width: 100%;
        margin: 0;
        margin-bottom: 1.6rem
    }
}

.writer-block .btn-part .btn-base {
    color: #323131;
    background: #fff;
    padding: 2.4rem;
    min-width: auto
}

.writer-block .btn-part .btn-base.writer:before {
    content: "";
    background: url(/images/ico_arrow_square.svg) no-repeat center center/contain;
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 1.6rem
}

.writer-block .btn-part .btn-base.instagram:before {
    content: "";
    width: 32px;
    height: 32px;
    background: url(/images/ico_instagram.svg) no-repeat center center/contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.6rem
}

.post-writer {
    display: flex;
    align-items: center;
    margin: 1.6rem 0
}

.post-writer .ph-part {
    width: 50px;
    min-width: 50px;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    position: relative;
    margin-right: 1.6rem
}

.post-writer .ph-part img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: cover
}

@media (-ms-high-contrast:none) {
    .post-writer .ph-part img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.post-writer .txt-part {
    font-size: 1.3rem;
    width: calc(100% - 55px);
    display: flex
}

@media only screen and (max-width:768px) {
    .post-writer .txt-part {
        display: block;
        width: 100%
    }
}

.post-writer .txt-part .name {
    margin-right: 1.6rem
}

@media only screen and (max-width:768px) {
    .post-writer .txt-part .name {
        margin: 0
    }
}

.col-block {
    display: flex;
    flex-wrap: wrap;
    margin: 2.4rem 0
}

.col-block .ph-part {
    width: 40%;
    margin-right: 5%;
    background: #e2e5ec;
    position: relative;
    aspect-ratio: 4/3;
    object-fit: contain
}

@media only screen and (max-width:768px) {
    .col-block .ph-part {
        width: 100%;
        margin-right: 0
    }
}

.col-block .ph-part>img {
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: contain
}

@media (-ms-high-contrast:none) {
    .col-block .ph-part>img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.col-block .txt-part {
    width: 55%
}

@media only screen and (max-width:768px) {
    .col-block .txt-part {
        width: 100%
    }
}

.col-block .txt-part .btn-block {
    margin-bottom: 0
}

.col-block.reverse {
    flex-direction: row-reverse
}

.col-block.reverse .ph-part {
    margin-right: 0;
    margin-left: 5%
}

@media only screen and (max-width:768px) {
    .col-block.reverse .ph-part {
        margin-left: 0
    }
}

.col-block.overlap {
    position: relative;
    flex-wrap: nowrap;
    align-items: flex-start
}

@media only screen and (max-width:768px) {
    .col-block.overlap {
        flex-wrap: wrap
    }
}

.col-block.overlap .ph-part {
    width: 60%;
    position: relative;
    z-index: -1;
    margin: 0
}

@media only screen and (max-width:768px) {
    .col-block.overlap .ph-part {
        width: 100%
    }
}

.col-block.overlap .txt-part {
    background: #fff;
    border-radius: 30px;
    width: 60%;
    padding: 3.2rem;
    margin: 3.2rem 0;
    margin-left: -20%
}

@media only screen and (max-width:768px) {
    .col-block.overlap .txt-part {
        width: 100%;
        margin: -2em 0 2em !important
    }
}

.col-block.overlap.reverse .txt-part {
    margin-left: 0;
    margin-right: -20%
}

.col-block.ratio-1-1 .ph-part {
    aspect-ratio: 1/1 !important;
    object-fit: contain !important
}

.col-block.ratio-3-2 .ph-part {
    aspect-ratio: 3/2 !important;
    object-fit: contain !important
}

.col-block.ratio-3-4 .ph-part {
    aspect-ratio: 3/4 !important;
    object-fit: contain !important
}

.col-block.ratio-4-3 .ph-part {
    aspect-ratio: 4/3 !important;
    object-fit: contain !important
}

.col-block.ratio-16-9 .ph-part {
    aspect-ratio: 16/9 !important;
    object-fit: contain !important
}

.list-article {
    margin-bottom: 3.2rem
}

.list-article li a {
    padding: 2rem 0;
    border-bottom: 1px solid #B5B5B5;
    display: block;
    position: relative
}

.list-article li a:hover {
    opacity: 0.7
}

.list-article li a .date-part {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

@media only screen and (max-width:768px) {
    .list-article li a .date-part {
        display: block
    }

}

.list-article li a .date-part .date-post {
    font-weight: bold;
    text-decoration: none;
    margin-right: 1rem;
    margin-bottom: 0.8rem
}

@media only screen and (max-width:768px) {
  .list-article li a .date-part .date-post {
    display: inline-block;
    margin-right: 0;
  }
  .list-article li a .date-part .list-icon {
    display: inline-block;
      
  }
}
.list-article li a .ttl {
    text-decoration: underline;
    margin-bottom: 0.8rem;
}

.list-article li a[target="_blank"] .ttl::after {
  background: url(/images/ico_blank.svg) no-repeat center center/contain;
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  z-index: 2;
  margin-left: .5em;
  vertical-align: middle;
  margin-bottom: .2em;
}

.list-article li a .txt {
    font-size: 1.4rem
}

ul.list-search {
    margin-bottom: 4.8rem;
    margin-bottom: 4.8rem
}

ul.list-search li {
    border-bottom: 1px solid #B5B5B5
}

ul.list-search li a {
    font-size: 1.4rem;
    padding: 2.4rem 0;
    display: block
}

ul.list-search li a .list-search-ttl {
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 1.6rem
}

ul.list-search li a:hover {
    text-decoration: underline
}

.spot-data {
    margin-bottom: 4rem
}

.spot-data dl {
    background: #EEEEEE;
    border-bottom: 1px solid #B5B5B5;
    display: flex;
    flex-wrap: wrap
}

.spot-data dl:first-child {
    border-top: 1px solid #B5B5B5
}

.spot-data dl>dt {
    background: #EEEEEE;
    font-weight: bold;
    width: 12em;
    min-width: 12em;
    padding: 2.4rem;
    display: flex;
    justify-content: center
}

@media only screen and (max-width:768px) {
    .spot-data dl>dt {
        width: 8em;
        min-width: 8em;
        text-align: center;
        padding: 1.6rem 0.8rem
    }
}

.spot-data dl>dd {
    background: #fff;
    width: calc(100% - 12em);
    padding: 2.4rem;
    margin-left: auto
}

@media only screen and (max-width:768px) {
    .spot-data dl>dd {
        width: calc(100% - 8em);
        padding: 1.6rem
    }
}

.spot-data dl>dd a {
    color: #0F41AF;
    text-decoration: underline
}

.spot-data dl>dd a[target=_blank]:after {
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 1em;
    right: 0;
    background: url(/images/ico_blank.svg) no-repeat center center/contain;
    z-index: 1
}

.spot-data .spot-note {
    font-size: 1.4rem;
    text-align: right;
    margin-top: 1.6rem;
    width: 100%
}

.access-block .access-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
    .access-block .access-map {
        padding-top: 60%
    }
}

.access-block .access-map iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important
}

.access-block .btn-block {
    margin-bottom: 4rem
}

.map-block .map {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
    .map-block .map {
        padding-top: 60%
    }
}

.map-block .map iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important
}

.list-mappin {
    display: flex;
    flex-wrap: wrap
}

.list-mappin>li {
    font-size: 1.6rem;
    font-weight: bold;
    width: 23%;
    margin: 0 2.6666666667% 1em 0
}

.list-mappin>li:nth-child(4n) {
    margin-right: 0
}

@media only screen and (max-width:768px) {
    .list-mappin>li {
        width: 100% !important;
        margin-right: 0
    }
}

.mappin {
    font-size: 1.6rem;
    font-weight: normal;
    width: 2em;
    height: 2em;
    color: #FFF;
    background: var(--blue);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.6rem
}

.mappin-block {
    display: inline-block
}

.view-block {
    margin-bottom: 4rem
}

.view-block .view-map>.ac-list .view-ttl {
    background: #EEEEEE;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 2.4rem 4.8rem 2.4rem 2.4rem;
    position: relative
}

.view-block .view-map>div:not(.ac-list) {
    background: #D5E1E1;
    padding: 4rem
}

@media only screen and (max-width:768px) {
    .view-block .view-map>div:not(.ac-list) {
        padding: 2.4rem
    }
}

.view-block .view-map.toggle-arrow .view-ttl:after {
    content: "";
    width: 0.7rem;
    height: 1.4rem;
    background: url(/images/ico_arrow_square.svg) no-repeat center center/contain;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%) rotateZ(90deg)
}

@media only screen and (max-width:768px) {
    .view-block .view-map.toggle-arrow .view-ttl:after {
        right: 5%
    }
}

.view-block .view-map.toggle-arrow .view-ttl.active:after {
    transform: translateY(-50%) rotateZ(-90deg)
}

.view-block .view-map.toggle-plus .view-ttl:after,
.view-block .view-map.toggle-plus .view-ttl:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #000;
    border-radius: 10px
}

.view-block .view-map.toggle-plus .view-ttl:before {
    width: 2rem;
    height: 0.3rem;
    right: 2rem
}

@media only screen and (max-width:768px) {
    .view-block .view-map.toggle-plus .view-ttl:before {
        right: 1.5rem
    }
}

.view-block .view-map.toggle-plus .view-ttl:after {
    width: 0.3rem;
    height: 2rem;
    right: 2.8rem
}

@media only screen and (max-width:768px) {
    .view-block .view-map.toggle-plus .view-ttl:after {
        right: 2.4rem
    }
}

.view-block .view-map.toggle-plus .view-ttl.active:after {
    display: none
}

.view-block .view-note {
    font-size: 1.4rem;
    text-align: right;
    margin-top: 1.6rem;
    width: 100%
}

.category-block {
    background: #EEEEEE;
    padding: 2.4rem 3.2rem 0;
    margin-bottom: 4rem
}

@media only screen and (max-width:768px) {
    .category-block {
        padding: 2.4rem 2.4rem 0
    }
}

.category-block dl {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.category-block dl>dt {
    font-size: 1.8rem;
    font-weight: bold;
    width: 25%;
    margin-bottom: 0.8rem
}

@media only screen and (max-width:768px) {
    .category-block dl>dt {
        width: 100%;
        margin-bottom: 1.6rem
    }
}

.category-block dl>dd {
    width: 75%;
    margin-bottom: 1.6rem
}

@media only screen and (max-width:768px) {
    .category-block dl>dd {
        width: 100%
    }
}

.category-block .btn-block {
    margin-bottom: 4rem
}

.list-qa .col-qa {
    border-bottom: 1px solid #fff
}

.list-qa .col-qa .ac-list>.col-qa-ttl {
    background: #EEEEEE;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 2.4rem 4.8rem 2.4rem 2.4rem
}

.list-qa .col-qa .ac-list>.col-qa-ttl span {
    width: 7em;
    min-width: 7em;
    text-align: center;
    margin-right: 0.8rem
}

@media only screen and (max-width:768px) {
    .list-qa .col-qa .ac-list>.col-qa-ttl span {
        width: 4em;
        min-width: 4em
    }
}

.list-qa .col-qa>div:not(.ac-list) {
    padding: 2.4rem
}

.list-qa .col-qa>div:not(.ac-list) span {
    width: 7em;
    min-width: 7em;
    text-align: center;
    margin-right: 0.8rem
}

@media only screen and (max-width:768px) {
    .list-qa .col-qa>div:not(.ac-list) span {
        width: 4em;
        min-width: 4em
    }
}

.list-qa.toggle-arrow .col-qa-ttl:after {
    content: "";
    width: 0.7rem;
    height: 1.4rem;
    background: url(/images/ico_arrow_square.svg) no-repeat center center/contain;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: 1.5em;
    transform: translateY(-50%) rotateZ(90deg)
}

@media only screen and (max-width:768px) {
    .list-qa.toggle-arrow .col-qa-ttl:after {
        right: 5%
    }
}

.list-qa.toggle-arrow .col-qa-ttl.active:after {
    transform: translateY(-50%) rotateZ(-90deg)
}

.list-qa.toggle-plus .col-qa-ttl:after,
.list-qa.toggle-plus .col-qa-ttl:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #000;
    border-radius: 10px
}

.list-qa.toggle-plus .col-qa-ttl:before {
    width: 2rem;
    height: 0.3rem;
    right: 2rem
}

@media only screen and (max-width:768px) {
    .list-qa.toggle-plus .col-qa-ttl:before {
        right: 1.5rem
    }
}

.list-qa.toggle-plus .col-qa-ttl:after {
    width: 0.3rem;
    height: 2rem;
    right: 2.8rem
}

@media only screen and (max-width:768px) {
    .list-qa.toggle-plus .col-qa-ttl:after {
        right: 2.4rem
    }
}

.list-qa.toggle-plus .col-qa-ttl.active:after {
    display: none
}

.list-bnr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em 2em
}

@media only screen and (max-width:768px) {
    .list-bnr {
        flex-wrap: wrap
    }
}

.list-bnr li {
    border-radius: 10px;
    overflow: hidden
}

@media only screen and (max-width:768px) {
    .list-bnr li {
        width: calc(50% - 1em)
    }
}

.list-bnr li a {
    aspect-ratio: 16/9;
    object-fit: contain
}

div.list-sitemap-td,
ul.list-sitemap-lr {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

ul.list-sitemap-lr>li {
    width: 49%
}

@media only screen and (max-width:768px) {
    ul.list-sitemap-lr>li {
        width: 100%
    }
}

ul.list-sitemap-lr>li:last-child {
    border-bottom: 1px solid #B5B5B5
}

ul.list-sitemap-lr>li:nth-last-child(2) {
    border-bottom: 1px solid #B5B5B5
}

@media only screen and (max-width:768px) {
    ul.list-sitemap-lr>li:nth-last-child(2) {
        border: none
    }
}

ul.list-sitemap-lr>li>a {
    border-top: 1px solid #B5B5B5;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 2.4rem 3.2rem;
    position: relative;
    display: block
}

@media only screen and (max-width:768px) {
    ul.list-sitemap-lr>li>a {
        padding: 1.6rem 2.4rem 1.6rem 1.6rem;
        font-size: 1.6rem
    }
}

ul.list-sitemap-lr>li>a:after {
    content: "";
    width: 1rem;
    height: 1.5rem;
    margin: 0 0.5em 0.2em auto;
    background: url(/images/ico_arrow_radius.svg) no-repeat center center/contain;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%)
}

ul.list-sitemap-lr>li>a+.u-layer {
    border-top: 1px solid #B5B5B5;
    padding: 0.8rem 0 0.8rem 3.2rem
}

@media only screen and (max-width:768px) {
    ul.list-sitemap-lr>li>a+.u-layer {
        padding: 0.8rem 0 0.8rem 1.6rem
    }
}

ul.list-sitemap-lr>li>a+.u-layer li {
    margin: 2.4rem 0
}

ul.list-sitemap-lr>li>a+.u-layer li a {
    font-weight: bold;
    display: block;
    padding-left: 4rem;
    position: relative
}

ul.list-sitemap-lr>li>a+.u-layer li a:before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    position: absolute;
    top: 50%;
    left: 0.3em;
    transform: translateY(-50%);
    border-radius: 50%;
    padding: 0.4rem;
    background: var(--blue) url(/images/ico_arrow_w.svg) no-repeat center center/8px;
    z-index: 2
}

div.list-sitemap-td>ul {
    width: 49%
}

@media only screen and (max-width:768px) {
    div.list-sitemap-td>ul {
        width: 100%
    }
}

div.list-sitemap-td>ul:nth-last-child(2)>li:last-child {
    border-bottom: 1px solid #B5B5B5
}

@media only screen and (max-width:768px) {
    div.list-sitemap-td>ul:nth-last-child(2)>li:last-child {
        border: none
    }
}

div.list-sitemap-td>ul>li>a {
    border-top: 1px solid #B5B5B5;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 2.4rem 3.2rem;
    position: relative;
    display: block
}

@media only screen and (max-width:768px) {
    div.list-sitemap-td>ul>li>a {
        padding: 1.6rem 2.4rem 1.6rem 1.6rem;
        font-size: 1.6rem
    }
}

div.list-sitemap-td>ul>li>a:after {
    content: "";
    width: 1rem;
    height: 1.5rem;
    margin: 0 0.5em 0.2em auto;
    background: url(/images/ico_arrow_radius.svg) no-repeat center center/contain;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%)
}

div.list-sitemap-td>ul>li>a+.u-layer {
    border-top: 1px solid #B5B5B5;
    padding: 0.8rem 0 0.8rem 3.2rem
}

@media only screen and (max-width:768px) {
    div.list-sitemap-td>ul>li>a+.u-layer {
        padding: 0.8rem 0 0.8rem 1.6rem
    }
}

div.list-sitemap-td>ul>li>a+.u-layer li {
    margin: 2.4rem 0
}

div.list-sitemap-td>ul>li>a+.u-layer li a {
    font-weight: bold;
    display: block;
    padding-left: 4rem;
    position: relative
}

div.list-sitemap-td>ul>li>a+.u-layer li a:before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    position: absolute;
    top: 50%;
    left: 0.3em;
    transform: translateY(-50%);
    border-radius: 50%;
    padding: 0.4rem;
    background: var(--blue) url(/images/ico_arrow_w.svg) no-repeat center center/8px;
    z-index: 2
}

div.list-sitemap-td>ul>li>a+.u-layer li a[target=_blank]:after {
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 1em;
    right: 0;
    background: url(/images/ico_blank.svg) no-repeat center center/contain;
    z-index: 1
}

.static-wrap {
    text-align: center;
    margin: 8rem 0
}

@media only screen and (max-width:768px) {
    .static-wrap {
        min-height: inherit
    }
}

.static-wrap.border {
    border: 1px solid #707070;
    border-radius: 20px
}

.static-wrap .page-ttl {
    background: none
}

.static-wrap .static-ttl {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 3.2rem
}

@media only screen and (max-width:768px) {
    .static-wrap .static-ttl {
        font-size: 2.6rem
    }
}

.static-wrap .static-txt {
    font-weight: bold;
    line-height: 1.8;
    margin: 0 1.6rem 5.6rem
}

main:has(.static-wrap.border)+#footer {
    color: #323131;
    background: none
}

.table-data {
    border-collapse: collapse;
    border: 1px solid #B5B5B5
}

.table-data.active {
    white-space: inherit
}

.table-data caption {
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.8rem
}

.table-data tr th {
    color: #323131;
    background: #EEEEEE;
    border: 1px solid #B5B5B5;
    font-weight: bold;
    padding: 0.8rem
}

.table-data tr td {
    background: #fff;
    border: 1px solid #B5B5B5;
    padding: 0.8rem
}

@media only screen and (max-width:1100px) {
    .table-scroll .table-data {
        width: auto;
        white-space: nowrap
    }
}

.table-scroll .scroll-bar {
    overflow-x: auto;
    overflow-y: hidden
}

.table-scroll .scroll-bar .scroll-in {
    height: 10px
}

.table-scroll .scroll-table {
    overflow: auto;
    position: relative
}

.table-scroll .scroll-table:before {
    content: "";
    display: block;
    position: absolute;
    background: url(/images/pct_scrollhint.svg) no-repeat center center/contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.table-scroll .pct-scrollhint {
    display: none;
    font-size: 1.1rem;
    padding: 1em;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.table-scroll .pct-scrollhint span {
    color: #fff;
    margin-top: 0.4em;
    display: block;
    white-space: nowrap
}

.table-scroll .pct-scrollhint.active {
    display: block
}

.list-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em 1em
}

.list-gallery li a {
    display: block
}

@media only screen and (max-width:768px) {
    .list-gallery {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (max-width:768px) {
    .modaal-wrapper .modaal-gallery-control {
        top: 50%;
        transform: translateY(-50%) scale(0.6)
    }

    .modaal-wrapper .modaal-gallery-control.modaal-gallery-prev {
        left: -15px
    }

    .modaal-wrapper .modaal-gallery-control.modaal-gallery-next {
        right: -15px
    }
}

.back-number {
    background: #EEEEEE;
    text-align: center;
    position: relative;
    padding: 1.6rem
}

.back-number .back-number-ttl {
    font-size: 2rem;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    padding: 0.8rem 0;
    margin-bottom: 1.6rem
}

@media only screen and (max-width:768px) {
    .back-number .back-number-ttl {
        cursor: pointer;
        padding: 0;
        margin-bottom: 0
    }

    .back-number .back-number-ttl:after,
    .back-number .back-number-ttl:before {
        content: "";
        display: block;
        position: absolute;
        background: #000;
        border-radius: 10px
    }

    .back-number .back-number-ttl:before {
        width: 20px;
        height: 3px;
        right: 25px;
        top: 1.5em
    }
}

@media only screen and (max-width:768px) and (max-width:768px) {
    .back-number .back-number-ttl:before {
        right: 15px
    }
}

@media only screen and (max-width:768px) {
    .back-number .back-number-ttl:after {
        width: 3px;
        height: 20px;
        right: 33px;
        top: 1.05em
    }
}

@media only screen and (max-width:768px) and (max-width:768px) {
    .back-number .back-number-ttl:after {
        right: 24px
    }
}

@media only screen and (max-width:768px) {
    .back-number .back-number-ttl.active:after {
        display: none
    }
}

.back-number .list-year {
    position: relative
}

@media only screen and (max-width:768px) {
    .back-number .list-year {
        margin-top: 1em;
        display: none
    }
}

.back-number .list-year li {
    margin-bottom: 0.8rem
}

.back-number .list-year li a {
    padding: 1.6rem 0;
    display: block;
    background: #fff
}

.wrapper-layout {
    display: flex;
    justify-content: space-between
}

.wrapper-layout .side-contents {
    width: 25%;
    z-index: 0
}

@media only screen and (max-width:768px) {
    .wrapper-layout .side-contents {
        width: 100%
    }
}

.wrapper-layout .side-contents .side-ttl {
    font-size: 2.4rem;
    font-weight: bold;
    margin: 1.6rem 0
}

@media only screen and (max-width:768px) {
    .wrapper-layout .side-contents .side-ttl {
        font-size: 2rem
    }
}

.wrapper-layout .side-contents .side-block {
    margin-top: 6rem;
    margin-bottom: 4rem
}

.wrapper-layout .main-contents {
    width: 72%
}

@media only screen and (max-width:768px) {
    .wrapper-layout .main-contents {
        width: 100%
    }
}

@media only screen and (max-width:768px) {
    .wrapper-layout {
        display: block
    }
}

.slider-block .swiper-button-next,
.slider-block .swiper-button-prev {
    position: absolute;
    z-index: 10;
    cursor: pointer
}

.slider-block .swiper-button-next:before,
.slider-block .swiper-button-prev:before {
    content: "";
    width: 8rem;
    height: 8rem;
    background: var(--blue);
    position: absolute;
    border-radius: 50%;
    transition: all 0.3s
}

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

    .slider-block .swiper-button-next:before,
    .slider-block .swiper-button-prev:before {
        width: 6rem;
        height: 6rem
    }
}

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

    .slider-block .swiper-button-next:before,
    .slider-block .swiper-button-prev:before {
        width: 3rem;
        height: 3rem
    }
}

.slider-block .swiper-button-next:after,
.slider-block .swiper-button-prev:after {
    content: "";
    width: 3rem;
    height: 2rem;
    display: block;
    border: none;
    transform: rotate(0);
    background: url(/images/ico_arrow_w.svg) no-repeat center center/contain
}

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

    .slider-block .swiper-button-next:after,
    .slider-block .swiper-button-prev:after {
        width: 2.5rem;
        height: 1.5rem
    }
}

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

    .slider-block .swiper-button-next:after,
    .slider-block .swiper-button-prev:after {
        width: 2rem;
        height: 1rem
    }
}

.slider-block .swiper-button-next.swiper-button-disabled,
.slider-block .swiper-button-prev.swiper-button-disabled {
    opacity: 0
}

.slider-block .swiper-button-next {
    right: 4rem
}

@media only screen and (max-width:768px) {
    .slider-block .swiper-button-next {
        right: 1rem
    }
}

.slider-block .swiper-button-prev {
    left: 4rem
}

@media only screen and (max-width:768px) {
    .slider-block .swiper-button-prev {
        left: 1rem
    }
}

.slider-block .swiper-button-prev:after {
    transform: rotate(-180deg)
}

.slider-block .stopbtn {
    color: #FFF;
    background: #333;
    border-radius: 10px;
    font-size: 1.4rem;
    text-align: center;
    padding: 0.2em 0.8em;
    display: block;
    position: absolute;
    bottom: 0.5em;
    left: 0;
    z-index: 15;
    cursor: pointer
}

.slider-block .stopbtn:hover {
    opacity: 1
}

.slider-block .stopbtn:before {
    content: "";
    width: 12px;
    height: 12px;
    display: inline-block;
    border: none;
    background: url(/images/ico_play_w.svg) no-repeat center center/contain;
    margin-right: 0.5em
}

.slider-block .stopbtn.stop:before {
    background: url(/images/ico_stop_w.svg) no-repeat center center/contain
}

.slider-block .stopbtn02 {
    width: 2.5em;
    height: 2.5em;
    color: #FFF;
    text-indent: -200px;
    background: var(--blue);
    border: none;
    border-radius: 50%;
    padding: 0.5em;
    display: flex;
    align-items: center;
    position: absolute;
    left: 1em;
    bottom: 0.5em;
    z-index: 15
}

.slider-block .stopbtn02.play:after,
.slider-block .stopbtn02.stop:after {
    content: "";
    width: 0.8em;
    height: 0.8em;
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/images/ico_stop_w.svg) no-repeat center center/contain
}

.slider-block .stopbtn02.play:after {
    background: url(/images/ico_play_w.svg) no-repeat center center/contain
}

.slider-block .btn-swiper {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0.5em;
    bottom: 0.5em;
    z-index: 15
}

.slider-block .btn-swiper p+p {
    margin-left: 0.5em
}

.slider-block .btn-swiper p button.btn {
    width: 2.5em;
    height: 2.5em;
    color: #FFF;
    background: #000;
    text-indent: -200px;
    padding: 0.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    border: none
}

@media only screen and (max-width:768px) {
    .slider-block .btn-swiper p button.btn {
        width: 2em;
        height: 2em
    }
}

.slider-block .btn-swiper p button.btn.play:after,
.slider-block .btn-swiper p button.btn.stop:after {
    content: "";
    width: 0.8em;
    height: 0.8em;
    display: block;
    margin: 0 auto;
    background: url(/images/ico_stop_w.svg) no-repeat center center/contain
}

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

    .slider-block .btn-swiper p button.btn.play:after,
    .slider-block .btn-swiper p button.btn.stop:after {
        width: 0.6em;
        height: 0.6em
    }
}

.slider-block .btn-swiper p button.btn.play:after {
    background: url(/images/ico_play_w.svg) no-repeat center center/contain
}

.slider-block .btn-swiper p button.btn.active {
    background: var(--blue)
}

.slider-block .swiper-pagination-bullet-active {
    background: #000
}

.slider-block {
    width: 100%;
    position: relative
}

.slider-block .swiper .swiper-wrapper {
    height: auto
}

.slider-block .swiper .swiper-slide {
    overflow: hidden
}

.slider-block .swiper .swiper-slide img {
    width: 100%
}

.slider-block.slider-ratio .swiper-slide a>img,
.slider-block.slider-ratio .swiper-slide>img {
    background: #e2e5ec;
    width: 100%;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.7s;
    object-fit: contain
}

@media (-ms-high-contrast:none) {

    .slider-block.slider-ratio .swiper-slide a>img,
    .slider-block.slider-ratio .swiper-slide>img {
        width: auto;
        height: auto;
        max-width: 130%;
        max-height: 130%
    }
}

.slider-block.ratio-1-1 .swiper-slide {
    aspect-ratio: 1/1 !important;
    object-fit: contain !important
}

.slider-block.ratio-3-2 .swiper-slide {
    aspect-ratio: 3/2 !important;
    object-fit: contain !important
}

.slider-block.ratio-3-4 .swiper-slide {
    aspect-ratio: 3/4 !important;
    object-fit: contain !important
}

.slider-block.ratio-4-3 .swiper-slide {
    aspect-ratio: 4/3 !important;
    object-fit: contain !important
}

.slider-block.ratio-16-9 .swiper-slide {
    aspect-ratio: 16/9 !important;
    object-fit: contain !important
}

.slider-bnr {
    padding: 2em;
    background: #B5B5B5
}

.slider-bnr .list-bnr {
    justify-content: flex-start
}

.slider-bnr .list-bnr li {
    margin: 0;
    height: auto
}

.slider-bnr .swiper-button-next {
    right: 0
}

.slider-bnr .swiper-button-prev {
    left: 0
}

.slider-thumb {
    margin: 2em 0
}

.slider-thumb .slider-inner {
    position: relative;
    margin-bottom: 1.6rem
}

.slider-thumb .list-thumb {
    margin-bottom: 2em;
    height: auto;
    flex-wrap: nowrap
}

.slider-thumb .swiper-button-next {
    right: -1rem
}

@media only screen and (max-width:768px) {
    .slider-thumb .swiper-button-next {
        right: -0.5em
    }
}

.slider-thumb .swiper-button-prev {
    left: -1rem
}

@media only screen and (max-width:768px) {
    .slider-thumb .swiper-button-prev {
        left: -0.5em
    }
}

.gallery-top .swiper-slide a>img,
.gallery-top .swiper-slide>img {
    object-fit: cover !important
}

.gallery-thumbs .swiper-slide>img {
    object-fit: cover !important
}

.slider-thumb-vertical {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 80% 1fr;
    grid-template-areas: "left right"
}

@media only screen and (max-width:1100px) {
    .slider-thumb-vertical {
        grid-template-columns: 73% 1fr
    }
}

@media only screen and (max-width:768px) {
    .slider-thumb-vertical {
        display: block;
        height: auto
    }
}

.slider-thumb-vertical .slider-inner {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    position: relative;
    margin-right: 7%;
    grid-area: left;
    height: fit-content
}

@media only screen and (max-width:768px) {
    .slider-thumb-vertical .slider-inner {
        width: 100%;
        margin-bottom: 1.6rem
    }
}

.slider-thumb-vertical .gallery-thumbs {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    width: 100%;
    height: 600px;
    grid-area: right
}

@media only screen and (max-width:768px) {
    .slider-thumb-vertical .gallery-thumbs {
        width: 100%;
        height: auto
    }
}

.slider-thumb-vertical .swiper-button-next {
    right: -1rem
}

@media only screen and (max-width:768px) {
    .slider-thumb-vertical .swiper-button-next {
        right: -0.5em
    }
}

.slider-thumb-vertical .swiper-button-prev {
    left: -1rem
}

@media only screen and (max-width:768px) {
    .slider-thumb-vertical .swiper-button-prev {
        left: -0.5em
    }
}

.slider-scroll-wrap .slider-scroll {
    margin-right: calc(50% - 50vw)
}

@media only screen and (max-width:768px) {
    .slider-scroll-wrap .slider-scroll {
        margin-right: 0
    }
}

.slider-scroll-wrap .slider-scroll .slider-block {
    max-width: 100%;
    padding-bottom: 4em
}

.slider-scroll-wrap .slider-scroll .swiper-button-next,
.slider-scroll-wrap .slider-scroll .swiper-button-prev {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto
}

.slider-scroll-wrap .slider-scroll .swiper-button-next {
    left: 2.5em
}

.slider-scroll-wrap .slider-scroll .swiper-button-prev {
    left: 0
}

.slider-scroll-wrap .slider-scroll .swiper-button-next:after,
.slider-scroll-wrap .slider-scroll .swiper-button-next:before,
.slider-scroll-wrap .slider-scroll .swiper-button-prev:after,
.slider-scroll-wrap .slider-scroll .swiper-button-prev:before {
    display: none
}

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

    .slider-scroll-wrap .slider-scroll .swiper-button-next:after,
    .slider-scroll-wrap .slider-scroll .swiper-button-next:before,
    .slider-scroll-wrap .slider-scroll .swiper-button-prev:after,
    .slider-scroll-wrap .slider-scroll .swiper-button-prev:before {
        display: block
    }
}

.slider-scroll-wrap.ipad .slider-scroll {
    margin-right: 0
}

.slider-scroll-wrap.ipad .slider-scroll .slider-block {
    max-width: 100%;
    padding-bottom: 4em
}

.slider-scroll-wrap.ipad .slider-scroll .swiper-button-next,
.slider-scroll-wrap.ipad .slider-scroll .swiper-button-prev {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto
}

.slider-scroll-wrap.ipad .slider-scroll .swiper-button-next {
    left: 4.5em
}

.slider-scroll-wrap.ipad .slider-scroll .swiper-button-prev {
    left: 1em
}

.slider-scroll-wrap.ipad .slider-scroll .swiper-button-next:after,
.slider-scroll-wrap.ipad .slider-scroll .swiper-button-next:before,
.slider-scroll-wrap.ipad .slider-scroll .swiper-button-prev:after,
.slider-scroll-wrap.ipad .slider-scroll .swiper-button-prev:before {
    display: block
}

.slider-scroll-wrap.ipad .slider-scroll .list-scroll li {
    border: none
}


/*==============================================================
==============================================================


お知らせ


==============================================================
==============================================================*/


.post-ttl {
    color: #000;
    font-size: 4.2rem;
    font-weight: bold;
    margin-bottom: 4rem
  }
  
  @media only screen and (max-width:768px) {
    .post-ttl {
        font-size: 3.2rem
    }
  }
  
  .post-ttl span {
    vertical-align: middle;
    margin-left: 1em
  }
  
  .post-date-block {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 1.6rem 0
  }
  
  .post-date-block .icon-new {
    margin: 0 1.6rem
  }
  
  .post-date {
    text-align: right;
    display: block
  }
  
  .icon-post-block {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.6rem
  }
  
  @media only screen and (max-width:768px) {
    .icon-post-block {
        font-size: 1.4rem
    }
  }

  .wysiwyg h1 {
    font-size: 4.2rem;
    color: var(--blue);
    font-weight: bold;
    margin: 6rem 0 2.4rem;
  }

  @media only screen and (max-width:768px) {
  
    .wysiwyg h1 {
        margin: 4.8rem 0 2.4rem;
        line-height: 1.1;
    }
  }
  
  
  
  .post-sttl-large,
  .wysiwyg h2 {
    font-size: 3.2rem;
    font-weight: bold;
    padding: 1.6rem 0;
    margin: 5.4rem 0 2.4rem;
    position: relative
  }
  
  @media only screen and (max-width:768px) {
  
    .post-sttl-large,
    .wysiwyg h2 {
        margin: 4rem 0 2.4rem
    }
  }
  
  .post-sttl-large:after,
  .wysiwyg h2:after {
    content: "";
    background: var(--blue);
    display: block;
    width: 6rem;
    height: 0.2rem;
    position: absolute;
    left: 0;
    bottom: 0
  }
  
  @media only screen and (max-width:768px) {
  
    .post-sttl-large,
    .wysiwyg h2 {
        font-size: 2.6rem
    }
  }
  
  .post-sttl-small,
  .wysiwyg h3 {
    color: var(--blue);
    font-size: 2.6rem;
    font-weight: bold;
    margin: 4.8rem 0 2.4rem
  }
  
  @media only screen and (max-width:768px) {
  
    .post-sttl-small,
    .wysiwyg h3 {
        font-size: 2.2rem
    }
  }
  
  .wysiwyg h4 {
    color: #FFF;
    background: var(--blue);
    font-size: 2rem;
    padding: 1.6rem;
    margin: 4rem 0 2.4rem
  }
  
  @media only screen and (max-width:768px) {
    .wysiwyg h4 {
        font-size: 1.8rem
    }
  }
  
  .wysiwyg h5 {
    border-left: 7px solid var(--blue);
    font-size: 1.8rem;
    padding: 0.8rem 1.6rem;
    margin: 3.6rem 0 2.4rem
  }
  
  @media only screen and (max-width:768px) {
    .wysiwyg h5 {
        font-size: 1.6rem
    }
  }
  
  .wysiwyg h6 {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 3rem 0 2.4rem
  }
  
  @media only screen and (max-width:768px) {
    .wysiwyg h6 {
        font-size: 1.6rem
    }
  }
  
  .post-pht {
    margin-bottom: 1.6rem
  }
  
  .post-pht a {
    display: block
  }
  
  .post-pht>div {
    width: 100%;
    height: auto;
    max-height: 600px;
    text-align: center
  }
  
  @media only screen and (max-width:420px) {
    .post-pht>div {
        max-height: 300px
    }
  }
  
  .post-pht img {
    height: auto;
    max-height: 600px;
    max-width: 100%;
    width: auto;
    border-radius: 20px
  }
  
  @media only screen and (max-width:420px) {
    .post-pht img {
        max-height: 300px
    }
  }
  
  .post-pht figcaption {
    font-size: 1.4rem;
    text-align: center;
    display: block;
    margin-top: 0.8rem
  }
  
  .two-post-pht {
    display: flex;
    justify-content: space-between
  }
  
  .two-post-pht .post-pht {
    vertical-align: top;
    width: 48%
  }
  
  .post-pht-txt:after {
    content: "";
    display: block;
    clear: both
  }
  
  .post-pht-txt .post-pht {
    float: right;
    width: 48%;
    margin: 0 0 3.2rem 3.2rem;
    z-index: 10;
    position: relative
  }
  
  .post-pht-txt .wysiwyg {
    word-wrap: break-word;
    overflow-wrap: break-word
  }
  
  .post-pht-txt .wysiwyg h2,
  .post-pht-txt .wysiwyg h3,
  .post-pht-txt .wysiwyg h4,
  .post-pht-txt .wysiwyg h5,
  .post-pht-txt .wysiwyg h6,
  .post-pht-txt blockquote {
    display: flex;
    margin-top: 0
  }
  
  .iframe-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    margin-bottom: 1.6rem
  }
  
  .iframe-area iframe {
    filter: saturate(1.2);
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important
  }
  
  .wysiwyg {
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 4rem
  }
  
  .wysiwyg a:link,
  .wysiwyg a:visited {
    text-decoration: underline
  }
  
  .wysiwyg p {
    margin-bottom: 1.6rem
  }

  .wysiwyg pre {
    background: #eee;
    border-radius: 10px;
    padding: 1em;
    border: solid 1px #ddd;
    margin-bottom: 1.6rem
  }
  
  .wysiwyg strong {
    font-weight: bold
  }
  
  .wysiwyg em {
    font-weight: bold
  }
  
  .wysiwyg i {
    font-style: italic
  }
  
  .wysiwyg .underline {
    text-decoration: underline
  }
  
  .wysiwyg .strike {
    text-decoration: line-through
  }
  
  .wysiwyg sub {
    font-size: 0.8rem;
    vertical-align: bottom
  }
  
  .wysiwyg sup {
    font-size: 0.8rem;
    vertical-align: top
  }
  
  .wysiwyg ol {
    padding-left: 1.5em;
    margin-bottom: 1.6rem;
    list-style-type: decimal;
  }
  
  .wysiwyg ol[style] {
    padding-left: 1.5em
  }

  
  .wysiwyg ul {
    padding-left: 1.5em;
    margin-bottom: 1.6rem;
    list-style-type: disc;
  }
  
  .wysiwyg ul[style] {
    padding-left: 1em
  }
  
  .wysiwyg ul.horizontal-list {
    display: flex
  }
  
  .wysiwyg ul.horizontal-list li {
    margin-right: 2.6rem
  }


  .wysiwyg p img{
    width: auto;
    height: auto;
    max-width: 100%;
    display: inline-block;
  }

  .wysiwyg p img.mt-image-left{
    margin-right: 2em;
  }

  .wysiwyg p img.mt-image-right{
    margin-left: 2em;
  }



  .wysiwyg p:after {
    content: "";
    display: block;
    clear: both;
  }
  
 
  
  .wysiwyg .txt-indent {
    text-indent: 1em
  }
  
  .wysiwyg blockquote {
    background: #EEEEEE;
    box-sizing: border-box;
    padding: 3.2rem;
    margin-bottom: 1.6rem
  }
  
  .wysiwyg blockquote p {
    margin: 0;
  }


  
  .wysiwyg .txt-center {
    text-align: center
  }
  
  .wysiwyg .txt-right {
    text-align: right
  }
  
  .wysiwyg .txt-justify {
    text-align: justify
  }
  
  .wysiwyg a[href] {
    color: #0F41AF;
    text-decoration: underline;
    word-break: break-all
  }

  .asset-file a {
    color: #323131;
    border: 1px solid #707070;
    border-radius: 12px;
    padding: 2.4rem 2.4rem 2.4rem 6.8rem;
    display: block;
    position: relative
  }
  
  .asset-file a:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 2.4rem;
    transform: translateY(-50%);
    z-index: 2
  }
  
  .asset-file  a:hover {
    opacity: 0.7
  }
  
  .asset-file  a:before {
    background: url(/images/ico_file.svg) no-repeat center center/contain;
    width: 2rem;
    height: 2rem
  }
  
  .wysiwyg table {
    width: auto;
    border-collapse: collapse;
    border: 1px solid #EEEEEE;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 1.6rem
  }
  
  .wysiwyg table caption {
    font-weight: bold;
    text-align: left;
    margin-bottom: 0.8rem
  }
  
  .wysiwyg table p {
    margin: 0
  }
  
  .wysiwyg table tr th {
    color: #323131;
    background: #EEEEEE;
    border: 1px solid #B5B5B5;
    font-weight: bold;
    padding: 1.6rem
  }
  
  .wysiwyg table tr td {
    background: #FFFFFF;
    border: 1px solid #B5B5B5;
    padding: 1.6rem
  }
  
  .wysiwyg table .txt-justify {
    text-align-last: justify
  }
  
  .wysiwyg table.table-center {
    margin: 0 auto 4rem
  }
  
  .wysiwyg table.table-center caption {
    text-align: center
  }
  
  .wysiwyg table.table-right {
    margin-left: auto
  }
  
  .wysiwyg table.table-left {
    margin-right: auto
  }
  
  .wysiwyg .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: none;
    margin-bottom: 1.6rem
  }
  
  .wysiwyg .table-scroll::-webkit-scrollbar {
    height: 5px
  }
  
  .wysiwyg .table-scroll::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #EEEEEE
  }
  
  .wysiwyg .table-scroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #CCC
  }
  
  .wysiwyg .table-scroll table {
    margin: 0;
    max-width: none
  }
  
  .wysiwyg .table-scroll table caption {
    text-align: left
  }
  
  @media only screen and (max-width:420px) {
    .wysiwyg .table-scroll table {
        min-width: 100%
    }
  }
  
  .wysiwyg .font-size-small {
    font-size: 0.6em
  }
  
  .wysiwyg .font-size-large {
    font-size: 1.75em
  }
  
  .wysiwyg .font-space-small {
    letter-spacing: 0.5em;
    margin-left: 0.5em
  }
  
  .wysiwyg .font-space-medium {
    letter-spacing: 1em;
    margin-left: 1em
  }
  
  .wysiwyg .font-space-large {
    letter-spacing: 1.5em;
    margin-left: 1.5em
  }
  
  .wysiwyg .font-space-xlarge {
    letter-spacing: 2em;
    margin-left: 2em
  }
  
  .wysiwyg address {
    background: #EEEEEE;
    box-sizing: border-box;
    padding: 3.2rem;
    margin-bottom: 1.6rem
  }
  
  .wysiwyg q:before {
    content: '"'
  }
  
  .wysiwyg q:after {
    content: '"'
  }
  
  .wysiwyg q:lang(ja):before {
    content: "『"
  }
  
  .wysiwyg q:lang(ja):after {
    content: "』"
  }
  
  .wysiwyg q q:before {
    content: "'"
  }
  
  .wysiwyg q q:after {
    content: "'"
  }
  
  .wysiwyg q q:lang(ja):before {
    content: "「"
  }
  
  .wysiwyg q q:lang(ja):after {
    content: "」"
  }
  
  .wysiwyg cite {
    font-style: italic;
    font-family: Times New Roman, "ＭＳ Ｐゴシック"
  }
  
  .related-file,
  .related-link {
    margin-bottom: 2.4rem
  }
  
  .related-file a,
  .related-link a {
    color: #323131;
    border: 1px solid #707070;
    border-radius: 12px;
    padding: 2.4rem 2.4rem 2.4rem 6.8rem;
    display: block;
    position: relative
  }
  
  .related-file a:before,
  .related-link a:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 2.4rem;
    transform: translateY(-50%);
    z-index: 2
  }
  
  .related-file a:hover,
  .related-link a:hover {
    opacity: 0.7
  }
  
  .related-file a:before {
    background: url(/images/ico_file.svg) no-repeat center center/contain;
    width: 2rem;
    height: 2rem
  }
  
  .related-link a:before {
    background: url(/images/ico_link.svg) no-repeat center center/contain;
    width: 2rem;
    height: 2rem
  }
  
  .related-link a[target=_blank]:before {
    background: url(/images/ico_blank.svg) no-repeat center center/contain
  }
  
  .btn-postback {
    text-align: center;
    max-width: 300px;
    margin: 6.4rem auto
  }
  
  @media only screen and (max-width:768px) {
    .btn-postback {
        max-width: 100%
    }
  }
  

/*# sourceMappingURL=common.css.map */