@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');



body{
    font-family: 'Noto Sans JP', sans-serif;
    height:100vh;
    line-height: 1.7;
    color:var(--body);
}

:root{
    --primary:#37321e;
    --dark:#21252f;
    --body:#1e1e1e;
    --linkdark:#fff;
    --darkgreen:#37321e;
    --box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    --gold:#9f7a36;
    --bgbody:#faf5f5;
    --blue:#265BA8;
    --white:#F4F5F7;
}

.bg-white{
    background-color: var(--white);
}


section:nth-child(odd){
    background-color: rgba(255, 255, 255, 0.7);  /* 白背景に95%の透明度 */
}

section:nth-child(even){
    background-color: rgba(224, 231, 242, 0.7);  /* 薄い青背景に95%の透明度 */
}

  section{
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  section h2{
    text-align: center;
  }

  h2:first-letter {
    font-size: 2em;
    font-weight: bold;
    color: var(--gold);
  }

  p {
    overflow-wrap: break-word;
}

@media (min-width: 835px){
    .smp{
        display: none !important;
    }
    h1{
        font-size: 36px!important;
        font-weight: 700!important;
    }
    
    h2{
        font-size: 24px!important;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    h3{
        font-size: 20px!important;
    }
    h4{
        font-size: 16px!important;
        font-weight: bold;
    }
    h5{
        font-size: 16px!important;
        font-weight: bold;
    }
    p{
        font-size: 16px!important;
    }

    b{
        font-size: 16px!important;
    }

    .navbar-brand{
        margin-left: 35px;
    }

    .navbar .nav-link{
        font-size: 14px;
        font-weight: 700;
        padding-top:16px;
    }
    
    .navbar li{
        padding: 0 2px;
    }

    .hero{
        height: 80vh;
        background-position: center top;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        
    }

    .top{
        background-image: url("images/hero_pc.jpeg");
    }


    .sitenavi{
        background-color: #134288;
        top: 50%;
        right: 20px;
        width: 250px;
        z-index: 10;
        padding: 10px;
        border-radius: 10px;
    }
    .sitenavi a{
        color: #444;
    }
    .sitenavi p{
        font-weight: bold;
    }
    
    .parts{
        height: 300px;
    }

    .boxicons{
        width: 54px;
        height: 54px;
        font-size: 38px;
        margin-top: 5px;
    }

    .logo{
        width: 72px;
        height: 72px;
        font-size: 51px;
    }


    .section{
        width: 800px;
    }

    .pc_bg_clear{
        background-color:rgba(255,255,255,0.8);
        background-blend-mode:lighten;

      }

    
    .herotitle{
        padding: 0.5rem;
        top:20%;
    }

    .AHT{
        display: grid;
        padding: 3%;
        grid-template-columns: 1fr 1fr 1fr ;
        gap:1%;
    }


}

@media (max-width: 834px){
    .pc{
        display: none;
    }
    h1{
        font-size: 24px!important;
        font-weight: 700!important;
    }
    
    h2{
        font-size: 20px!important;
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    h3{
        font-size: 16px!important;
    }
    h4{
        font-size: 16px!important;
    }
    h5{
        font-size: 16px!important;
    }

    p{
        font-size: 14px!important;
        line-height: 1.8!important;
    }

    b{
        font-size: 14px;
    }

    .navbar .nav-link{
        font-size: 14px;
        font-weight: 700;
        padding-top:10px;
    }
    
    .navbar li{
        padding: 0 2px;
    }
    
.navbar-light .navbar-toggler{
    position: relative;
    height: 51px;
    width: 51px;
    display: inline-block;
    box-sizing: border-box;
    background-color: #fff;
    border: 2px solid #444;
  }

  .smpspace{
    padding-top: 300px;
  }

    .hero{
        height:80vh;
        background-position: center top;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
    }

    .top{
        background-image: url("images/hero_smp.jpeg");
    }



    .sitenavi{
        justify-content: space-between;
        text-align: center;
        height: 3rem;
        z-index: 1;
        top: 0;
        width: 100%;
    }

    
.sitenavi ul{
    margin: 0 ;
    padding: 0 ;
    }
    .sitenavi li{
    list-style: none;
    display: inline-block;
    padding: 0 0.5rem 0 0.5rem;
    }
    .sitenavi li:not(:last-child){
    border-right: 1px solid #ddd;
    }
    .sitenavi a{
    text-decoration: none;
    }

    .parts{
        width: 100%;
        height: 200px;
    }

    .boxicons{
        width: 38px;
        height: 38px;
        font-size: 21px;
        margin-top: 7px;
    }

    .logo{
        width: 57px;
        height: 57px;
        font-size: 32px;

    }

    .service ul{
        margin-left: 0.3rem;
        margin-right: 0.3rem;
    }

    .herotitle{
        padding: 0.3rem;
        top:15%;
    }



}

p{
    color: #030303;
}

b {
    margin: 1em;
}

a{
    text-decoration: none;
    color: black;
}

.maintitle{
    padding: 0.5rem;
    top:30%;
    vertical-align: middle;
    position: relative;
    z-index: 3;
}

.modelplan_title{
    top:5%;
    vertical-align: middle;
    position: relative;
    z-index: 3;
}

.bg-stripe-blue{
    background-color: #265BA8;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 3rem 3rem;
  }

  .bg-stripe-pblue{
    background-color: #C8E7FC;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 3rem 3rem;
  }

.maincolor{
    background-image: linear-gradient(33deg, rgba(19, 66, 136, 1), rgba(133, 183, 255, 1));
    background-color: #134288;
    color: white;
}
.maincolor a{
    color: white;
    text-decoration: none;
}
.maincolor a:hover{
    color: white;
    text-decoration: none;
}

.stripe{
    background-color: rgba(207, 199, 103, 0.3);
}

.navbar{
    z-index: 500;
}

.pankuzu{
    z-index: 500;
}


.sitenavi{
    position: fixed;
    bottom: 15px;
    right: 15px;
}


.hero{
    z-index: 500;
    background-color:rgba(255,255,255,0.2);
    background-blend-mode:lighten;
}




.herotitle{
    vertical-align: middle;
    position: relative;
}

.menuicon{
    vertical-align: middle;
    position: relative;
    top:40%;
}

.menu{
    line-height: 3rem;
}

.attention ul{
    list-style: none;
}


.attention ul li:before{
  content: "※";
  position: relative;
}



.btn-stitch {
    display: block;
	text-align: center;
	text-decoration: none;
	margin: auto;
	padding: 1rem 1rem;
	font-weight: bold;
	border: 2px solid #134288;
	color: #134288;
	transition: 0.5s;
    background-color: white;
  }
  
.btn-stitch:hover {
    color: #fff;
	background: #134288;
}

  .sitemenu ul{
    margin: 0 ;
    padding: 0 ;
    }
  .sitemenu li{
    list-style: none;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    }
    .sitemenu li:not(:last-child){
    border-right:1px solid #ddd;
    }
    .sitemenu a{
    text-decoration: none;
    }

    .parts{
        width: 100%;
        background-size: cover;
        border-radius: 10%;
    }

    .air{
        background-image: url(images/air.jpeg);
    }

    .hotel{
        background-image: url(images/hotel.jpeg);
    }

    .transfer{
        background-image: url(images/transfer.jpeg);
    }

    .other{
        background-image: url(images/other.jpeg);
    }

    .visa{
        background-image: url(images/visa.jpeg);
    }

    


    .float_box{
        overflow: auto;
        margin: 0 auto;
        display: block;
        box-sizing: border-box;
        width: 100%;
    }

    .col4{
        display: flex;
        justify-content: center;
        text-align: center;
        width: 25%;
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
        float: left;
        padding: 0.7em 0.5em;
        margin: 0;
        box-sizing: border-box;
    }


    .fas{
        font-size: 100px;
    }

    .boxicons{
        display: flex;
        justify-content: center;
        align-items: center;
        color:white;
        background-color: var(--gold);
        border-radius: 100px;
        flex: none;
    }

    .icon-text-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      .icon-text-container .boxicons {
        margin-bottom: 10px;
      }

      .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        color:white;
        background-color: var(--gold);
        border-radius: 3px;
        flex: none;
        border-radius: 50%;
      }

      .air_img{
        background-image: url(images/air_img.jpg);
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .hotel_img{
        background-image: url(images/hotel_img.jpg);
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .transfer_img{
        background-image: url(images/transfer_img.jpg);
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .other_img{
        background-image: url(images/other_img.jpg);
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
    }      

    .visa_img{
        background-image: url(images/visa_img.jpg);
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
    } 
    .mice_img{
        background-image: url(images/mice_img.jpg);
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
    } 

    .flow_img{
        background-image: url(images/flow_img.jpg);
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .bg_clear{
        background-color:rgba(255,255,255,0.8);
        border-radius: 10px;
        padding: 1%;

      }

      .service ul{
        border: double 4px #fabe00;
        padding: 0.5em 1em 0.5em 2.3em;
        position: relative;
        
    }
    
    .service ul li{
        line-height: 1.5;
        padding: 0.5em 0;
        list-style-type: none!important;
    }
    
    .service ul li:before{
        font-family: "Font Awesome 5 Free";
        content: "\f0a4";
        position: absolute;
        left : 1em; 
        color: #fabe00;
    }

    .pdficon ul{
        border: double 4px #A1690D;
        padding: 0.5em 1em 0.5em 2.3em;
        position: relative;
        
    }
    
    .pdficon ul li{
        line-height: 1.5;
        padding: 0.5em 0;
        list-style-type: none!important;
    }
    
    .pdficon ul li:before{
        font-family: "Font Awesome 5 Free";
        content: "\f1c1";
        position: absolute;
        left : 1em; 
        color: #A1690D;
    }

    .grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列にする */
        gap: 20px; /* 各セルの間に隙間を追加 */
    }

    @media (max-width: 834px){
        .grid2{
            display: grid;
            gap:26px;
            grid-template-columns: repeat(2,1fr);
            margin-top:3%;
            margin-bottom:50px;
        }
    }

    @media (min-width: 835px){
    .grid2{
        display: grid;
        gap:26px;
        grid-template-columns: repeat(2,1fr);
        margin-top:3%;
        margin-bottom:50px;
        padding: 1%;
    }
    }

    .thumbnail_effect {
        position: relative;
        display: inline-block; /* 親要素を適切に扱う */
    }
    
    .thumbnail_city {
        position: absolute;
        display: inline-block;
        color: #fff;
        background: var(--blue);
        top: 0;
        left: 0;
        z-index: 1; /* 画像上に配置 */
    }
    @media (min-width: 835px){
    .thumbnail_city {
        padding: 0.5rem 0.5rem;
    }
    }
    
    @media (max-width: 768px) {
    .thumbnail_city {
        padding: 3px 3px;
        font-size: 12px;
        }
    }
    
    .thumbnail_effect img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    @media (max-width: 768px) {
        .grid3 {
            grid-template-columns: repeat(3, 1fr); /* 3列に設定 */
        }
    }
    

      @media (min-width: 835px){
      .profile{
        position:absolute;
        bottom: 10%;
        right: 10%;
        background-color: rgba(0, 0, 0, 0.2);
        display: inline-block;
        padding: 0;
      }
    
      .profile table{
        color: white;
        padding: 0;
      }
      
    .modelhero{
    height: 90vh;    
        
    }
    }

    @media (max-width: 834px){
    .profile{
        margin: 3%;
        border: 2px black;
        position: absolute;
        top: 60vh;
        
      }

      .modelhero{
        height: 90vh;
      }

    }

    .modelhero{
        z-index: 500;
        width: auto;
        background-color:rgba(255,255,255,0.2);
        
        background-position: center top;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        background-blend-mode:lighten;
    }

    @media (min-width: 835px){
        .category h2 {
          padding-bottom: 10px;
          font-size: 26px;
          background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 2px, rgba(94, 87, 87, 0) 2px, rgba(0,0,0,0) 4px);
          background-size: 4px 4px;
          background-repeat: repeat-x;
          background-position: center bottom;
        } 
    }

    @media (max-width: 834px){
      
      .category h2 {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
          text-align: center;
      }
      
      .category h2::before,
      .category h2::after {
          content: '';
          width: 70px;
          height: 3px;
          background-color: var(--gold);
      }
      
      .category h2::before {
          margin-right: 15px;
      }
      .category h2::after {
          margin-left: 15px;
      }
    }

    .category ul{
        text-align: center;
      }
      
      .category li{
        display: inline-block;
        margin: auto;
      }

      .slider {
        width:94%;
        margin:0 auto;
        padding-top: 10px;
        position: relative;
    }
    
    @media (min-width: 835px){
      .slider img {
        width:94%;
    }
    }
    
    @media (max-width: 834px){
      .slider img {
        width:300px;
    }
    }
    .slider img {
        height:auto;
    }
    
    .slider .slick-slide {
      transform: scale(0.9);
      transition: all .7s;
      opacity: 0.5;
    }
    
    .slider .slick-slide.slick-center{
      opacity: 1;
    }
    .slider .slick-slide.slick-center{
        transform: scale(1);
      }

      .slick-prev, 
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
    height: 15px;
    width: 15px;
}

.slick-prev {
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {
    right: -1.5%;
    transform: rotate(45deg);
}


.slick-dots {
    text-align:center;
  margin:5px 0 0 0;
}

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:15px;
    height:15px;
    display:block;
    border-radius:50%;
    background:#ccc;
    margin-left: 5px;
}

.slick-dots .slick-active button{
    background:var(--blue);
}

ul.point {
    counter-reset: list;
    list-style-type: none;
    font-size: 14px;
    line-height: 1.6;
    padding: 0;
}

ul.point li {
    position: relative;
    padding: 0 0 0 20px;
    margin: 7px 0 7px 0px;
    font-size: 14px;
    line-height: 30px;
    border-bottom: dashed 1px var(--blue);
}

ul.point li:before {
    counter-increment: list;
    content: "";
    display: block;
    position: absolute;
    left: 5px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: var(--blue);
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.notes{
    background: var(--stripe);
  }
  
    .notes h3 {
    padding: 4px;
    border-bottom: solid 3px var(--blue);
    position: relative;
    }
    
    .notes h3:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px var(--blue);
    bottom: -3px;
    width: 20%;
    }

    
ol.flow{
    counter-reset:list;
    list-style-type:none;
    font-size: 14px;
    line-height : 1.6 ;
    padding:0;
    }
  
    ol.flow_pink li{
    border-bottom: dashed 1px var(--blue);
  }
  
  ol.flow_gold li{
    border-bottom: dashed 1px var(--gold);
  }
  
  ol.flow li{
    position:relative;
    padding: 0 0 0 30px;
    margin: 7px 0 7px 0px;
    font-size:14px;
    line-height: 29px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    }
    ol.flow li:before{
    counter-increment: list;
    content: counter(list);
    position: absolute;
    left: -10px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height:30px;
    border-radius: 50%;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    }
  
  ol.flow_pink li:before{
    background: var(--blue);
  }
  ol.flow_gold li:before{
    background: var(--gold);
  }
  
  ol.flow_gold li:hover{
    border-bottom-color: var(--gold);
  }

  ol.flow{
    counter-reset:list;
    list-style-type:none;
    font-size: 14px;
    line-height : 1.6 ;
    padding:0;
    }
  
    ol.flow_pink li{
    border-bottom: dashed 1px var(--blue);
  }
  
  ol.flow_gold li{
    border-bottom: dashed 1px var(--gold);
  }
  
  ol.flow li{
    position:relative;
    padding: 0 0 0 30px;
    margin: 7px 0 7px 0px;
    font-size:14px;
    line-height: 29px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
    }
    ol.flow li:before{
    counter-increment: list;
    content: counter(list);
    position: absolute;
    left: -10px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #fff;
    line-height:30px;
    border-radius: 50%;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    }
  
  ol.flow_pink li:before{
    background: var(--blue);
  }
  ol.flow_gold li:before{
    background: var(--gold);
  }
  
  ol.flow_gold li:hover{
    border-bottom-color: var(--gold);
  }

  .pt {
    text-align: center;
    padding: 0;
    margin: 20px 0;
}

@media screen and (max-width: 568px) {
    .inner {
        width: auto;
        margin: 0 auto;
        padding: 0 10px;
    }
}

@media screen and (max-width: 568px) {
    .pt {
        text-align: left;
        padding: 0;
        margin: 20px 0;
    }

    #sec1 .pt ul li {
        margin: 0 2% 5% 2%;
        width: 46%;
        vertical-align: top;
    }

    .pt ul li {
        margin: 0 2% 2% 2%;
        width: 46%;
        text-align: center;
    }
}

.pt ul {
    padding: 0;
    margin: 0;
    letter-spacing: -0.4em;
}

.pt ul li {
    display: inline-block;
    margin: 0 4px;
    padding: 0;
    letter-spacing: normal;
    vertical-align: top;
}

.pt li {
    list-style-type: none;
}

/* テーブルの幅を設定 */
.tbl-a {
    width: 100%;
    table-layout: fixed; /* 各セルを均等に配置 */
    border-collapse: collapse;
}

/* テーブル内のセルを均等に配置する */
.tbl-a td {
    width: 25%; /* 4つのセルが均等に並ぶように幅を25%に設定 */
    border-left: 1px solid #BDDDF1;
    padding: 10px;
    vertical-align: top;
    text-align: center;
    box-sizing: border-box; /* パディングを含む幅を正しく計算 */
}

/* 画像の幅を親要素内に収める */
.tbl-a img {
    max-width: 100%;
    height: auto;
}

/* スマホサイズではセルを縦に並べる */
@media screen and (max-width: 768px) {
    .tbl-a td {
        display: block;
        border-left: medium none;
        border-bottom: 1px solid #BDDDF1;
        width: 100%; /* 縦並びになるように幅を100%に */
        margin-bottom: 20px;
    }
}

/* スマホ以下の小さな画面サイズ */
@media screen and (max-width: 568px) {
    .tbl-a td {
        display: block;
        width: 100%;
        margin-bottom: 20px; /* 各セルの間に余白を追加 */
    }

    .tbl-a td img {
        width: 90vw; /* 画面の幅全体に収める */
        height: auto; /* アスペクト比を維持 */
        margin: auto;
    }
}

 /* Flow */
 .schedule {
  position: relative;
  font-size: 14px;
}
.schedule::before {
  position: absolute;
  top: 0px;
  left: 6.3em;
  width: 6px;
  height: 100%;
  background-color: #ebe4d6;
  content: "";
}

.schedule ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.schedule li {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.schedule li + li {
  margin-top: 2em;
}

.schedule_time {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 5em;
  height: 2em;
  border-radius: 4px;
  background-color: var(--gold);
  color: #fff;
  text-align: center;
  margin-left: 1em;
}
.schedule_time::before {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateX(50%) translateY(-50%) rotate(45deg);
  width: 0.5em;
  height: 0.5em;
  z-index: -1;
  background-color: var(--gold);
  content: "";
}
.schedule_time::after {
  position: absolute;
  top: 50%;
  left: 5em;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--gold);
  content: "";
}

.schedule_content_title {
  font-weight: bold;
}

.schedule_content {
  margin: 0px 0px 0px 3em;
  width: calc(100% - 10em);
}


.frontpanel{
    position: fixed;
    z-index: 9999;
    height: auto;
    width: auto;
    bottom: 20px;
    right: 20px;
}

.feature h3:first-letter {
    font-size: 2em;
    color: var(--blue);
  }

  .feature h2:first-letter {
    font-size: 2em;
    color: var(--blue);
  }

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列のグリッド */
    gap: 20px; /* アイテム間の隙間 */
    padding: 0 15px; /* ギャラリーの左右に余白 */
  }
  
  .gallery img {
    width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像の下にできる余白を削除 */
  }
  
  .gallery ul{
    padding-left:0;
  }
  .gallery li{
    list-style:none;
  }
  
  /* 横幅900px以下で3列に変更 */
  @media only screen and (max-width: 900px) {
    .gallery {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* 横幅768px以下で2列に変更 */
  @media only screen and (max-width: 768px) {
    .gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

.panel-list .panel {
    margin-bottom: 1%;
    width: calc(96% / 2);
    margin-right: 1%;
}

@media (max-width: 768px){
    .index .suggest .panel-list .panel a {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 4vw;
        margin-bottom: 0;
        width: 100%;
    }

    .index .suggest .panel-list .panel:not(:first-child)::before {
        background: #DBDBDB;
        content: "";
        display: block;
        height: 1px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        width: 92%;
        z-index: 2;
    }
}

@media (min-width: 769px){
    .index .suggest .panel-list .panel:not(:nth-of-type(5n)) {
        margin-right: 2%;
    }
    .panel-list .panel {
    margin-bottom: 2vw;
    width: calc(92% / 4);
    }

}


.panel-list .panel {
    background: #FFF;
    position: relative;
}

.countrymenu {
    display: inline-block;
    width: 100%;
    max-width: 350px; /* ボタン幅 */
    color: var(--gold); /* 文字色 */
    border: 2px solid var(--gold); /* 線幅・種類・色 */
    background: #fff; /* 背景色 */
    padding: 1em 2em;
    font-weight: bold; /* 文字の太さ */
    text-decoration: none;
    text-align: center;
    transition: 0.3s;
  }
  
  /* マウスオーバーした際のデザイン */
  .countrymenu:hover {
    color: #fff; /* 文字色 */
    background: var(--gold); /* 背景色 */
  }

  /* ボタンを囲むコンテナのスタイル */
.button-container {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    margin: 20px 0; /* 上下に余白を追加 */
  }
  
  /* 「ゴルフ回数を追加」ボタンのスタイル */
  #add-flightschedule-form , #add-user-form {
    text-align: center;
    background-color: var(--blue);
    color: white; /* 白文字 */
    font-size: 16px; /* フォントサイズ */
    padding: 10px 20px; /* パディング */
    border: none; /* ボーダーを消す */
    border-radius: 5px; /* 角を丸める */
    cursor: pointer; /* ポインターを変更 */
    transition: background-color 0.3s; /* 背景色をスムーズに変更 */
  }
  
  #add-flightschedule-form:hover , #add-user-form:hover {
    background-color: #45a049; /* ホバー時の色 */
  }
  
  /* 「削除」ボタンのスタイル */
  .delete-form , .remove-user-form {
    background-color: #f44336; /* 赤色 */
    color: white; /* 白文字 */
    font-size: 16px; /* フォントサイズ */
    padding: 10px 20px; /* パディング */
    border: none; /* ボーダーなし */
    border-radius: 4px; /* 角を丸く */
    cursor: pointer; /* マウスポインター */
    margin-top: 10px; /* 上に余白 */
    transition: background-color 0.3s ease; /* スムーズな背景色変更 */
  }
  
  .delete-form:hover , .remove-user-form:hover {
    background-color: #d32f2f; /* ホバー時に濃い赤色 */
  }
  
  .delete-form:active , .remove-user-form:active {
    transform: scale(0.95); /* クリック時に縮小 */
  }

  .orderform li {
    padding: 5px !important;
}

.wrapper{
    background-position: center top;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        width: 100%;
}

.contents_wrapper{
    background-position: center top;
        background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        width: 100%;
}

@media (min-width: 835px){
    .wrapper{
        padding: 8vw 0 5vw;
    }
    .contents_wrapper{
        padding: 4vw 0 2vw;
    }
    
}

@media (max-width: 834px){
    .wrapper{
        padding: 4vw 0 2vw;
    }

    .contents_wrapper{
        padding: 4vw 0 2vw;
    }

    .country-wrapper{
        padding: 4vw 0 2vw;
    }

}

.country-wrapper-images {
  position: relative;
  background: url("https://business-seven.com/images/parts/wrapper/country.webp")
              center top / cover no-repeat;
  width: 100%;
  color: var(--white);
}

/* グラデーションをオーバーレイ */
.country-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, #265ba8, #f1ebff);
  pointer-events: none;
  z-index: 1;
  opacity: 0.9; /* 必要に応じて調整 */
  mix-blend-mode: multiply; /* 「multiply（乗算）」や「overlay（オーバーレイ）」がおすすめ */
}

/* 中身のテキストを前面に出す */
.country-wrapper .container {
  position: relative;
  z-index: 2;
}

.country-wrapper p{
    color: var(--white);
}


.servicelist{
    background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
}

@media (min-width: 835px){
    .servicelist{
        padding: 12vw 0 9vw;
    }
}

@media (max-width: 834px){
    .servicelist{
        padding: 12vw 0 50vw;
    }
}

.hotel_wrapper th{
    width: 50px;
}

.modelplan_slide_hero {
    padding-left: 0!important;
  }

  .row_image{
    align-items: center;
  }

  .footer-top{
    padding-top: 30px;
}
.footer-top a{
    color: var(--linkdark);
}
.footer-end{
    padding-bottom: 30px;
}
.footer-end a{
    color: var(--linkdark);
}

.item_view li{
    padding: 10px 10px;
  }

  .images{
    position: relative;
  }

  .air_thumbnail{
    background-image: url(//business-seven.com/images/parts/logo/air.webp);
  }

  .transfer_thumbnail{
    background-image: url(//business-seven.com/images/parts/logo/transfer.webp);
  }

  .hotel_thumbnail{
    background-image: url(//business-seven.com/images/parts/logo/hotel.webp);
  }

  .hotelwrapper{
    background-image: url(//business-seven.com/images/parts/wrapper/hotel.webp);
    background-position: center top;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    width: 100%;
  }

  .transferwrapper{
    background-image: url(//business-seven.com/images/parts/wrapper/transfer.webp);
    background-position: center top;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    width: 100%;
  }

@media (min-width: 835px){
    .hotelwrapper{
        padding: 8vw 0 5vw;
    }
}

@media (max-width: 834px){
    .hotelwrapper{
        padding: 4vw 0 2vw;
    }
}

.font_wrapper{
    font-weight: bold;
      text-shadow:
        1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF,  0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.itemlist{
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(auto-fill, 70px);
    padding: 0.3em 3em;
}

@media (min-width: 835px){
    .itemlist{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 30px 10px;
    }
}

/* ----------------------------------- */
/* 修正が必要なメディアクエリ (max-width: 834px) */
/* ----------------------------------- */
@media (max-width: 834px){
    /* itemlistの設定: 2列表示を維持し、均等な幅を確保 */
    .itemlist{
        grid-template-columns: 1fr 1fr; /* 2列を維持 (1fr 1fr) */
        gap: 10px 10px;
        /* justify-items: center; は既に設定されている */
    }
    
    /* rowの設定: この要素に幅を設定し、ボタンを中央に配置 */
    /* これにより、ボタンの表示幅を統一します */
    .itemlist > .row {
        /* ボタンの最大幅に合わせて設定。ここでは例として150pxに設定 */
        /* ボタンの中のテキスト量に応じて調整してください */
        width: 150px; 
    }
}
/* ----------------------------------- */