*{margin:0; padding:0; box-sizing: border-box; 
}


body {background:#f6f6f6;


line-height: 2;
font-family: "Noto Sans JP", sans-serif;
}

img {max-width:100%; 

 display: block;
  margin: 0 auto;
}

a {text-decoration: none; color:#333333;}







.sp {display:none;}

.top { text-align: center; margin-bottom:100px;}

.content  {

width:1280px;

background:#fff;
color:#333333;

font-size:1.5vw;
line-height: 2;
margin:0 auto;
font-weight:bold;

text-align: center;

font-feature-settings: "palt";

padding:50px 80px;

padding-top:0px;
}

h1,h2,h3 {margin:0; line-height:1.5; }

h1 {font-size:3vw; font-style:oblique;}
h1 span{color:#a92125;}

h2 {font-size:2vw;}
h3 {font-size:2.5vw;}
h3 span {font-size:1.5vw; margin-left:1vw;}
h4 {font-size:1.5vw;}

ul {text-align: left; padding-left:1em; font-size:1.2vw;}
li {text-indent: -1em; list-style: none;}

.red {color:#c1272d; line-height:1.5;}

.logo {margin-bottom:40px; width:300px;}


.asha {position:relative;
margin:0 auto;
margin-bottom:60px;
display:table;
}



.line {border-top:5px dotted #333333; margin:30px; margin-bottom:100px;}

.catch {
margin:30px;
padding:80px 0px;
border-top:5px dotted #333333;
border-bottom:5px dotted #333333;

margin-bottom:100px;
}

.text-line-rightb {
    display: flex;
    align-items: center;
    /* 線の表示を確認するために、この要素の幅を広めに設定することを推奨します */
    width: 60%; /* 例として */
    color:#295dab;
    font-weight: bold;
    font-size: 2vw;
    margin-bottom:50px;
}

.text-line-rightb:after {
    content: "";
    flex-grow: 1; /* 残りの空間を埋める */
    height: 3px;
    display: block;
    
    /* 線のスタイル */
    margin-left: 20px;
    background: #295dab; /* 赤みがかった線 */
}


.text-line-right {
    display: flex;
    align-items: center;
    /* 線の表示を確認するために、この要素の幅を広めに設定することを推奨します */
    width: 60%; /* 例として */
    color:#a872c3;
    font-weight: bold;
    font-size: 2vw;
    margin-bottom:50px;
}

.text-line-right:after {
    content: "";
    flex-grow: 1; /* 残りの空間を埋める */
    height: 3px;
    display: block;
    
    /* 線のスタイル */
    margin-left: 20px;
    background: #a872c3; /* 赤みがかった線 */
}


.box {

text-align: left;
margin-bottom:50px;
}


.banner {width:80%;}

.kaku {background:#a872c3; padding:10px; color:#fff; font-weight: bold;
font-size:2.5vw;

margin-bottom: 20px;
text-align:center;
}
.kaku span {font-size:2vw;}


.maru {background:#c1272d; padding:10px; color:#fff; font-weight: bold;
font-size:2.5vw;

border-radius: 20px;
margin-bottom: 20px;
text-align:center;
}
.maru span {font-size:2vw;}



.link  {
  
line-height: 1;
  color:#fff;

  display:table;
  margin:0;

background:#a872c3;
border-radius: 30px; 
  font-size:2vw;
font-weight:bold;
padding:20px 30px;
margin:50px 0;
}





.fade-in {
  opacity: 0; /* 初期状態では透明 */
  transform: translateY(20px); /* 少し下に配置 */
  transition: opacity 1s ease, transform 1s ease; /* スムーズなアニメーション */
}

.fade-in.visible {
  opacity: 1; /* フェードインして見えるように */
  transform: translateY(0); /* 元の位置に移動 */
}



.up {transition: transform 0.3s ease; }
.up:hover {
  transform: translateY(-10px); /* 上に10px移動 */
}

.gallery {display:flex; justify-content: start; gap:10px;}
.click:hover {cursor: zoom-in; }
.item {width:50%; text-align: center;}
.blue {background: #295dab;}

/* モーダル全体 */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.9);
    z-index: 9999;

    /* フェードイン・アウト */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.modal.show {
    opacity: 1;
}

/* モーダル内コンテンツ */
.modal-content {
    position: relative;
    margin: 40px auto;
    width: 80%;
    max-width: 1000px;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* 拡大画像 */
#modal-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

/* 次/前 ボタン */
.prev-button, .next-button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-size: 30px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    user-select: none;
}

/* 前へ */
.prev-button {
    left: -50px;
}

/* 次へ */
.next-button {
    right: -50px;
}

/* 閉じるボタン */
.close-button {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 48px;
    color: white;
    cursor: pointer;
}




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

.close-button {
    position: absolute;
    top: 0;
    right: 1vw;
    font-size: 30px;
 
    cursor: pointer;
}


.modal-content {
 
    margin: 30vh auto;}



.pc {display:none;}
.sp {display:block;}


.content {width:100%; font-size:3.5vw; padding:50px 10px;}

h1 {font-size:8vw;}
h2 {font-size:7vw;}
h3 {font-size:5vw;}
h3 span {font-size:3vw;}
.catch {margin:30px 10px;}

.text-line-right {font-size:5vw; width:80%;}
.text-line-rightb {font-size:5vw; width:80%;}

.logo  {width:50%; margin-bottom:30px;}

.asha {margin-bottom:30px;}


.banner {width:100%;}
.kaku {font-size:5vw;}
.maru {font-size:5vw;}
.kaku span {font-size:3vw;}
.maru span {font-size:3vw;}


.item {width:70%;}






.link   {font-size:5vw;  }


ul {font-size: 3vw;}


}