@charset "utf-8";

section {
  margin: 50px 0px 0px 0px;
}

.uppage02 {
  color: #FFFFFF;/*文字色*/
  font-size: 18pt;
  font-weight: bold;
  width: 500px;
  padding: 0.5em;/*文字周りの余白*/
  margin: 20px auto;
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #0F5474;/*背景色*/
  border-radius: 20px 20px 20px 20px;/*左側の角を丸く*/
}

.kan01 {
  color: #E0E0E0;/*文字色*/
  font-size: 18pt;
  font-weight: bold;
  width: 600px;
  padding: 0.5em;/*文字周りの余白*/
  margin: 20px auto;
  display: inline-block;/*おまじない*/
  line-height: 1.0;/*行高*/
  background: #E60033;/*背景色*/
  border-radius: 20px 20px 20px 20px;/*左側の角を丸く*/
}

.kan02 {
  color: #e6b422;/*文字色*/
  font-size: 17pt;
  font-weight: bold;
  width: 600px;
  padding: 0.5em;/*文字周りの余白*/
  margin: 20px auto;
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #E60033;/*背景色*/
  border-radius: 20px 20px 20px 20px;/*左側の角を丸く*/
}

.wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; /* 画面が狭いとき折り返し */
}

.wrap2 {
  display: flex;
  align-items: center;   /* ← ここが重要 */
  gap: 20px;
}

.item-block {
  margin-bottom: 40px;
}

.text-area {
  margin-bottom: 10px;
}

.image-row {
  display: flex;
  gap: 15px;
}

.image-row img {
  width: 150px;
  height: auto;
}

.image .thumb {
  width: 175px;
  height: auto;
  display: block;
  cursor: pointer;
}

/* 絵型だと分かりやすくする場合（任意） */
.image .drawing {
  border: 1px solid #ddd;
  background: #fafafa;
}


.image {
  flex: 1;
}

.image img {
  width: 200px;
  height: auto;
  display: block;
}

.image-gallery {
  display: flex;
  gap: 10px;
}

.image-gallery a {
  width: calc(100% / 6);
}

.image-gallery img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

.thumb {
  width: 175px;
  height: auto;
  max-width: 175px;
  cursor: pointer;
}

.thumb2 {
  width: 150px;
  height: auto;
  display: block;
  cursor: pointer;
}

.drawing {
  border: 1px solid #ddd;
  background: #fafafa;
}

h3 {
  color: #000000;/*文字色*/
  width:auto;
  padding: 0.5em;/*文字周りの余白*/
  padding-left: 30px;
  margin: 0px 0px 10px 0px;
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  width: auto;;
  background: #FFD700;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
}

h4 {
  color: #808080;/*文字色*/
  padding: 15px;/*文字周りの余白*/
  margin: 0px;
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  width: auto;
  background: #FFD700;/*背景色*/
  vertical-align: middle;
}

h5 {
  color: #505050;/*文字色*/
  font-size: 15pt;
  padding: 0.5em;/*文字周りの余白*/
  margin: 0px;
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  width: 100%;
  vertical-align: middle;
}

img {
  margin: auto;
  display: block;
}

.main {
  text-align: center;
  width: 100%;
  max-width: 900px;
  }

.flexbox02{      
  display: flex;
  }

  .flexbox03{      
    display: flex;
    }

.s01 p{
  margin: 5px;
  font-size: 13pt;
  }
  
.left02{
text-align: left;
width: 75%;
}

/* PC用（今の指定を維持） */
.left002{
  text-align: left;
  width: 350px;
  flex-shrink: 0;
}

.left002 img{
  max-width: 100%;
  height: auto;
  display: block;
}


/* スマホ用：横スクロール防止 */
@media screen and (max-width: 768px) {
  .left002{
    width: 100%;        /* 画面幅いっぱい使ってOK */
    flex-shrink: 1;    /* 縮小・折り返しを許可 */
  }
}

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

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

  .image-row{
    flex-wrap: wrap;      /* 折り返し許可 */
    justify-content: center;
  }

  .image-row img{
    width: 45%;           /* 2列表示 */
    max-width: 100%;
    height: auto;
  }

  .image-gallery{
    flex-wrap: wrap;      /* ギャラリーも折り返す */
  }

  .image-gallery a{
    width: 48%;
  }

}

.left02 p{
margin: 0%;
padding-left: 30px;
font-size: 11pt;
flex: 1;
}



.right02{
width: 25%;
padding-top: 50px;
flex: 1;
}




/* 見出し */
.bxborder h3{
  width:auto;
  margin-bottom:15px;
  display:inline-block;
}

/* 文章 */
.bxborder p{
  margin:5px 0;
}

/* リスト */
.bxborder ul{
  padding-left:20px;
  margin:10px 0;
}

.bxborder li{
  margin-bottom:5px;
}


.left03{
width: 35%;
}

.right03 p{
text-align: left;
margin: 10px 20px;
font-size: 11pt;
}
  
.right03{
text-align: center;
width: 65%;
line-height:30px;
}

/*矢印*/
.dli-caret-right {
  display: inline-block;
  vertical-align: middle;
  color: #0D2A52;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.375em 0.64952em;
  border-left-color: currentColor;
  border-right: 0;
  margin: 10px;
}

/* セクション全体 */
.kanreki-section{
  max-width:900px;
  margin:40px auto;
}

/* 共通ボックス */
.bxborder{
  border:2px solid #d9df00;
  padding:25px;
  margin:30px auto;
  border-radius:20px;
  text-align:left;
  background:#fff;
}


/* 見出し */
.bxborder h3{
  margin-bottom:15px;
}

/* リスト */
.bxborder ul{
  padding-left:20px;
  margin:10px 0 15px 0;
}

.bxborder li{
  margin-bottom:5px;
}

/* コピー */
.kanreki-copy{
  text-align:center;
  font-size:18px;
  font-weight:bold;
  margin:25px 0;
  color:#E60033;
}

/* ボタン */
.kanreki-btn{
  text-align:center !important;
  margin:30px 0 !important;
}

.kanreki-btn a{
  all:unset;
  display:inline-block;
  background:#b80028;
  color:#fff;
  padding:4px 18px;
  border-radius:40px;
  font-weight:bold;
  cursor:pointer;
}

.kanreki-btn a:hover{
  background:#c4002b;
  color:#ffffff !important;
}

/*----------------------------
メディアクエリ
----------------------------*/
@media screen and (max-width: 767px) {
  section {
    margin: 10px 0px;
  }

  .kan01 {
    color: #E0E0E0;/*文字色*/
    font-size: 13pt;
    font-weight: bold;
    width: 300px;
    padding: 0.5em;/*文字周りの余白*/
    margin: 10px auto;
    display: inline-block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #E60033;/*背景色*/
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
  }
  
    .kan02 {
    color: #e6b422;/*文字色*/
    font-size: 13pt;
    font-weight: bold;
    width: 300px;
    padding: 0.5em;/*文字周りの余白*/
    margin: 10px auto;
    display: inline-block;/*おまじない*/
    line-height: 1.3;/*行高*/
    background: #E60033;/*背景色*/
    border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
  }

  h4 {
    font-size: 10pt;
    color: #000000;/*文字色*/
    padding: 12px;/*文字周りの余白*/
    margin: 0px;
    display: inline-block;/*おまじない*/
    line-height: 1.3;/*行高*/
    width: auto;
    background: #FFD700;/*背景色*/
    vertical-align: middle;
  }

  .s01 p{
    margin: 5px;
    font-size: 10pt;
    }

    h3 {
      font-size: 10pt;
      color: #000000;/*文字色*/
      padding: 0.5em;/*文字周りの余白*/
      padding-left: 20px;
      margin: 0px 0px 10px 0px;
      display: inline-block;/*おまじない*/
      line-height: 1.3;/*行高*/
      width: 250px;
      background: #FFD700;/*背景色*/
      vertical-align: middle;
      border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
    }

    .s02 p{
      margin: 5px;
      font-size: 10pt;
      }

    .s03 p{
      margin: 5px;
      font-size: 10pt;
      line-height: 1.5em
      }
    .s04 p{
     margin: 5px;
     font-size: 10pt;
     line-height: 1.5em
        }

    h5 {
      font-size: 12pt;
      display: inline-block;/*おまじない*/
      }
      
      .towellink2 a {
        color:white;
        text-decoration: underline;
        font-size: 12pt;
      }
}


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

.bxborder{
  width:95%;
  padding:18px;
}

/* 見出しの枠かぶり防止 */
.bxborder h3{
  width:100%;
  display:block;
  box-sizing:border-box;
}

/* 文章 */
.bxborder p{
  font-size:14px;
  line-height:1.7;
}

/* リスト下の文章揃える */
.bxborder ul{
  padding-left:18px;
}

}

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

.kanreki-section{
  width:95%;
}

.bxborder p{
  font-size:14px;
  line-height:1.7;
}

.kanreki-copy{
  font-size:16px;
}

}


.kanreki-btn{
  text-align:center;
  margin:30px 0;
}

.kanreki-btn a{
  text-decoration:none;
}

.kanreki-btn span{
  display:inline-block;
  background:#b80028;
  color:#fff;
  padding:2px 16px;
  border-radius:25px;
  font-weight:bold;
  font-size:16px;
}