@font-face {
  font-family: 'DIN';
  src: url('../fonts/DIN-2014_Bold.otf') format('opentype');
  font-display: swap; /* 読み込み中に代替フォントを表示する設定 */
}
@font-face {
  font-family: 'hiragino-min';
  src: url('../fonts/hiragino-min-pro_W3.otf') format('opentype');
  font-display: swap; 
}
@font-face {
  font-family: 'hiragino-min';
  font-weight: bold;
  src: url('../fonts/hiragino-min-pro_W6.otf') format('opentype');
  font-display: swap; 
}


html{
    font-size:calc(1000px / 62);
    min-height:0;
}


@media (max-width:1000px){
    html{
        font-size:calc(100vw / 62);
    }   
}

@media (max-width:768px){
    html{
        font-size:calc(100vw / 48);
    }
}

@media (max-width:480px){
    html{
        font-size:calc(100vw / 27);
    }
}


@media (min-width:481px){ .show-S{ display:none !important; } }
@media (min-width:769px){ .show-MS{ display:none !important; } }
@media (min-width:769px) and (max-width:480px){ .show-M{ display:none !important; } }
@media (max-width:480px){ .show-LM{ display:none !important; } }
@media (max-width:768px){ .show-L{ display:none !important; } }
@media (max-width:1200px){ .show-orido{ display:none !important; } }

* {
    box-sizing: border-box;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    font-family:inherit;
}

html,
body{
    overflow-x: clip;
}

body {
    background-color: #363636;
    color: #fff;
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

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

a:hover{
    opacity:0.5;
    transition: 0.3s;
}



#orido-supra img{
  width:100%;
}

#orido-supra .round-img img{
  border-radius:15px;
}

#first{
max-width:1800px;/*全体幅*/ 
margin:0 auto;
padding:0;
margin-bottom:150px;
}


#article{
    max-width:1300px;/*全体幅*/ 
    margin:0 auto;
    padding:0 20px 0 20px;
    margin-bottom:150px;
}

.al-right{
    display:flex;
    flex-wrap: wrap; 
    gap:30px;
    margin-bottom:120px;
}

.al-right .h-text{
    text-align: right;
    font-size:2.2rem;
    font-family: "hiragino-min-pro",serif;
    font-weight: bold;
    flex-basis: 100%;
    position: relative;
    display: inline-block;
    margin-right:10vh;
}

.al-right .h-text::after{
    content:"";
    position:absolute;
    left:100%;
    top:50%;
    margin-left:10px;
    transform:translateY(-50%);
    width:100vw; 
    height:2px;
    background:#be1623;
}

.al-right .round-img {
    flex-basis: calc(70% - 15px);
    position: relative;
}

.al-right .round-img img {
  display: block;
  height: auto;
}

/* 黒い半透明の円 */
.al-right .round-img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;         /* 画像サイズに応じて自動伸縮（固定値 px でもOK） */
  aspect-ratio: 1;    /* 正方形（真円）を維持 */
  max-width: 160px;   /* 大きくなりすぎない上限値 */
  min-width: 60px;
  background-color: rgba(0, 0, 0, 0.5); /* 黒の半透明 */
  border-radius: 50%;
  pointer-events: none; /* クリックイベントを透過 */
}

/* 中央の白枠三角形（SVGを背景に使用） */
.al-right .round-img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* 三角形は視覚的に左寄りに見えやすいため、やや右に補正（-43%） */
  transform: translate(-43%, -50%);
  width: 12%;         /* 円のサイズに合わせた大きさ */
  aspect-ratio: 1;
  max-width: 80px;
  min-width: 30px;
  
  /* 白い線画の三角形 SVG データ */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="25,15 85,50 25,85" fill="none" stroke="white" stroke-width="1" stroke-linejoin="miter"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.al-right .p-text{
    text-align: left;
    flex-basis: calc(30% - 65px);
    line-height: 2rem;
    margin-left:50px;
    
}

.al-right .p-text .playbtn{
    color:#000;
    background:#fff;
    display:inline-block;
    width:auto;
    text-align: center;
    margin-top:30px;
    position:relative;
    padding:5px 20px 5px 15px;
    border-radius: 0 5px 5px 0;
}

.al-right .p-text .playbtn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 20px;
    height: 100%;
    background: #fff;
    transform: skewX(-18deg);
    z-index: 1;
    border-radius:5px 0 0 5px;

}

.al-left{
    display:flex;
    flex-wrap: wrap; 
    gap:30px;
    margin-bottom:80px;
}

.al-left .h-text{
    text-align: left;
    font-size:2.2rem;
    font-family: "hiragino-min-pro",serif;
    font-weight: bold;
    flex-basis: 100%;
    position: relative;
    display: inline-block;
    margin-left:10vh;
}

.al-left .h-text::after{
    content:"";
    position:absolute;
    right:100%;
    top:50%;
    margin-right:10px;
    transform:translateY(-50%);
    width:100vw; 
    height:2px;
    background:#be1623;
}

.al-left .round-img{
    order:2;
  flex-basis: calc(70% - 15px);
}

.al-left .p-text{
    order:1;
    text-align: left;
    flex-basis: calc(30% - 15px);
    line-height: 2rem;
}


#gallery-zen{
    margin-bottom:150px;
}

#gallery-zen .swiper{
    overflow: visible;
    position: relative;
}

#gallery-zen .swiper-pagination{
    bottom: 20px;
    left: 20px;
    width: auto;
    text-align: left;

}

#gallery-zen .swiper-pagination-bullet{
    width:40px;
    height:4px;
    border-radius:2px;
    background:#9f9f9f;
    opacity:1;
}

#gallery-zen .swiper-pagination-bullet-active{
    background:#be1623;
}


#gallery-zen .switch-btn{
      max-width:1300px;/*全体幅*/ 
    margin:0 auto;
    padding:0 15px;
    display:flex;
    gap:30px;
    position:relative;
    margin-bottom:85px;
}

#gallery-zen .switch-btn::after{
    content:"";
    position:absolute;
    top:50%;
    margin-left:;
    transform:translateY(-50%);
    width:100vw; 
    height:2px;
    background:#be1623;
}

#gallery-zen .switch-btn .btn-item{
    font-family: "DIN";
    font-size:1.4rem;
    letter-spacing: 0.1rem;
    background-color: #4d4d4d;
    flex-basis:150px;
    text-align: center;
    padding:5px 0;
    z-index: 1;
    box-shadow: 5px 5px 10px #000;
    transition:
        background-color .35s ease,
        box-shadow .35s ease,
        color .35s ease;
    border-radius: 5px;
}

#gallery-zen .switch-btn .act{
    background-color: #be1623;
    box-shadow: none;
}

#gallery-zen .switch-pt{
    position:relative;
}

#gallery-zen .switch-pt .switch-img{
    max-width:1200px;/*スライダー画像の最大幅*/
    margin-right:100px;
}

#gallery-zen .switch-pt .switch-txt{
    background-color:#000;
    position:absolute;
    top:-130px;
    right:0;
    width:650px;
    padding:40px 40px 40px 130px;
    clip-path: polygon(
    100px 0,/*斜めの角度を調整*/
    100% 0,
    100% 100%,
    0 100%
    );
    clip-path: polygon(
    round 10px,
    100px 0,/*斜めの角度を調整*/
    100% 0,
    100% 100%,
    0 100%
    );
}

#gallery-zen .switch-pt .switch-txt .s-text{
    font-family: "DIN";
    font-size:1.8rem;
    letter-spacing: 0.2rem;
    color:#be1623;
}
#gallery-zen .switch-pt .switch-txt .h-text{
    font-size:1.8rem;
    font-family: "hiragino-min-pro",serif;
    font-weight: bold;
    margin-bottom:20px;
}
#gallery-zen .switch-pt .switch-txt .p-text{

}

#message{
    max-width:1400px;/*全体幅*/ 
    margin:0 auto;
    padding:0 20px 0 20px;
    margin-bottom:200px;
}

#message .al-left .round-img{
    order:1;
    flex-basis: calc(70% - 15px);
}

#message .al-left .p-text{
    order:2;
    flex-basis: calc(30% - 15px);
}
#message .al-left .p-text b{
    font-size:1.4rem;
    display: inline-block;
    margin-bottom:20px;
}


#gallery-yori{
    width:100%;
    margin:150px 0 100px 0;
    position:relative;
}

#gallery-yori .gallerySwiper{
    width:100%;
}

#gallery-yori .gallerySwiper .swiper-slide{
    width:1000px;
    max-width:90%;
}

#gallery-yori .gallerySwiper img{
    width:100%;
    display:block;
}

#gallery-yori .gallery-title{
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    display:flex;
    border-radius: 100px;
}

#gallery-yori .gallery-fixed{
    font-family:"hiragino-min-pro",serif;
    background:#000;
    color:#fff;
    width:280px;
    text-align:center;
    padding:5px 5px 5px 20px;
    font-size:30px;
    letter-spacing:6px;
    position:relative;
}

#gallery-yori .gallery-fixed::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 60px;
    height: 100%;
    background: #000;
    transform: skewX(-15deg);
    z-index: 1;

}

#gallery-yori .gallery-caption{
    background:#fff;
    color:#000;
    width:300px;
    padding:15px 5px 15px 20px;
    text-align:center;
}

#gallery-yori .swiper-button-prev,
#gallery-yori .swiper-button-next {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
}

#gallery-yori .swiper-button-prev {
    left: 10px!important;
}
#gallery-yori .swiper-button-next {
    right: 10px!important;
}

#gallery-yori .swiper-button-prev svg,
#gallery-yori .swiper-button-next svg {
  display: none !important;
}

#gallery-yori .swiper-button-prev::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 16px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 13px solid #fff;
}

#gallery-yori .swiper-button-next::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 16px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 13px solid #fff;
}

#gallery-yori .pagelink-oya{
    text-align: center;
    margin-top:100px;
}
#gallery-yori .pagelink{
    background-color:#be1623;
    display:inline-block;
    padding:20px 50px;
    font-weight: bold;
    box-shadow: 5px 5px 10px #000;
    border-radius: 5px;
}
#gallery-yori .pagelink:hover{
    box-shadow: none;
}

footer {
background-color: #000;
color: #fff;
}

footer span {
display: block;
padding: 0.5rem;
font-size: 0.8rem;
text-align: center;
}

.space-5 {
height: 5rem;
}

@media (max-width:1100px){
#gallery-zen .switch-btn .btn-item{
    flex-basis: 90px;
}
}

@media (max-width:768px){
#first{
    margin-bottom:80px;
}

.al-right .h-text,
.al-left .h-text{
    font-size:1.8rem;
    margin-bottom:-15px;
}
.al-right{
    margin-bottom:80px;
}

.al-right .round-img {
    order:2;
    flex-basis: 100%;
}
.al-right .h-text{
    text-align: left;
    margin-right:0;
}
.al-right .h-text::after{
    left:auto;
}
.al-right .p-text{
    margin-left:0;
}

.al-right .p-text{
    order:1;
    flex-basis: 100%;
}

.playbtn-oya{
    text-align: right;
    margin-bottom:-40px;
}

.al-left .round-img{
    flex-basis: 100%;
}
.al-left .h-text {
    margin-left:0;
}

.al-left .h-text::after{
right:auto;
left: auto;
margin-left:10px;
}
.al-left .p-text{
    flex-basis: 100%;
}

#article{
    margin-bottom:20px;
}
#gallery-zen{
    margin-bottom:100px;
}
#gallery-zen .switch-btn {
margin-bottom: 200px;
}

#gallery-zen .switch-pt .switch-img {
    margin-right:0;
}

#gallery-zen .switch-pt .switch-txt{
    top:-180px;
    right:0;
    width:calc(100% - 40px);
    height:300px;
    padding:30px 25px 30px 25px;
    margin-left:20px;
    margin-right:20px;


    clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - 14vw)
    );
}

#gallery-zen .switch-pt .switch-txt .s-text{
    font-size:1.8rem;
    letter-spacing: 0.2rem;
}
#gallery-zen .switch-pt .switch-txt .h-text{
    font-size:1.35rem!important;
    margin-bottom:20px;
}
#gallery-zen .switch-pt .switch-txt .p-text{
    font-size:0.9rem;
}

#gallery-zen .swiper-pagination {
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
}
#gallery-zen .switch-btn .btn-item{
    flex-basis:150px;
}

#message{
    margin-bottom:100px;
}

#message .al-left .round-img{
    flex-basis: 100%;
}

#message .al-left .p-text{
    flex-basis: 100%;
}


#gallery-yori .gallery-title{
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
    display:flex;
    border-radius: 100px;
}

#gallery-yori .gallery-fixed{
    width:120px;
    padding:4px 2px 4px 2px;
    font-size:1.2rem;
    letter-spacing:0.1rem;
}

#gallery-yori .gallery-fixed::after {
    top: 0;
    right: -10px;
    width: 20px;
    height: 100%;

}

#gallery-yori .gallery-caption{
    width:240px;
    padding:4px 0px 4px 4px;
}




}