@charset "UTF-8";

/* スマホでは非表示 */
.sp_no{display: none;}


.content{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}


/*◎768px以下*/
@media screen and (max-width: 768px) {
}

/*◎768px以上*/
@media screen and (min-width: 768px) {
}

/*◎768〜1240の間の幅*/
@media screen and (min-width: 768px) and (max-width: 1240px){
}





/*--------------------*/
/*----main-visial-----*/
/*-------------------*/
.main-visial{
position:relative;
overflow: hidden;
}
.main-visial .main-visial-inner{
position: absolute;
width: 100vw;
height: 100svh;
z-index: 1;
display: grid;
grid-template-rows: 50% 50%;
  grid-template-areas:
    "areaA areaA"
    "areaB areaB";
}
/*デバイス横*/
@media (orientation: landscape){
.main-visial .main-visial-inner{
grid-template-columns: 60% 40%;
  grid-template-areas:
    "areaB areaA"
    "areaB areaA";
}
}





/* ロゴマーク */
.main-visial .main-logomarc{
grid-area: areaA;
height: 100%;
container-type: size;
display: grid;
align-items: flex-start;
justify-content: flex-end;
}
.main-visial .main-logomarc #logomarc{
width: 95cqmin;
margin-top:-4cqmin;
margin-right: -4cqmin;
}
/*スマホ横*/
@media (orientation: landscape){
.main-visial .main-logomarc #logomarc{
width: 80cqmin;
}
}




/* メインコピー全体囲み */
.main-visial .main_copy{
grid-area: areaB;
padding: 0 5cqmin 15cqmin 5cqmin;
color: var(--color-white);
}
.main-visial .main_copy .main_copy-inner{
container-type: size;
display: flex;
height: 100%;
justify-content:flex-end;
flex-direction:column;
}
/*デバイス横*/
@media (orientation: landscape){
.main-visial .main_copy{
padding: 0 0 20cqmin 6cqmin;
}
.main-visial .main_copy .main_copy-inner{
margin-top: 20%;
padding-bottom: 30%;
display: grid;
column-gap:15px;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "areaD areaE"
    "areaF areaF";
}
}


/* 文字ロゴ画像 */
.main-visial .main_copy .main-logo-title{
width: 76cqmin;
/* アニメ */
opacity: 0;
animation-name: logo-title-anima;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 2.5s;
animation-fill-mode: forwards;
}
@keyframes logo-title-anima {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*デバイス横*/
@media (orientation: landscape){
.main-visial .main_copy .main-logo-title{
grid-area: areaD;
width: 100%;
}
}







/* 見出し */
.main-visial .main_copy .main-title{
margin-top: 7cqmin;
column-gap:1cqmin;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.main-visial .main_copy .main-title .main-title-txt{
font-size: var(--s22);
line-height: var(--s30);
letter-spacing: 0.2cqmin;
font-weight: 600;
/*アニメ*/
opacity: 0;
animation-name:main-title-anime;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 3s;
animation-fill-mode: forwards;
}
@keyframes main-title-anime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*デバイス横*/
@media (orientation: landscape){
.main-visial .main_copy .main-title{
margin-top: 0;
grid-area: areaE;
}
.main-visial .main_copy .main-title .main-title-txt{
font-size: var(--s16);
line-height: var(--s24);
}
}
/*◎幅400px以下（mini）*/
@media screen and (max-width: 400px) {
.main-visial .main_copy .main-title .main-title-txt{
font-size: var(--s20);
line-height: var(--s28);
}
}



/*北海道マーク*/
.main-visial .main_copy .main-title .main-title-img{
display: none;
}



/* 本文 */
.main-visial .main_copy .main_txt{
width: 90cqmin;
font-size: var(--s16);
line-height: 150%;
margin-top: 2cqmin;
/*アニメ*/
opacity: 0;
animation-name:main_txt-anime;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 3.5s;
animation-fill-mode: forwards;
}
@keyframes main_txt-anime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*デバイス横*/
@media (orientation: landscape){
.main-visial .main_copy .main_txt{
width:100%;
font-size: var(--s14);
grid-area: areaF;
}
}
/*◎幅400px以下*/
@media screen and (max-width: 400px) {
.main-visial .main_copy .main_txt{
width: 100cqmin;
}
}



/* wave */
.main-visial .main-wave{
position:absolute;
width: 100%;
bottom: 0;
z-index: 1;
/*アニメ*/
opacity: 0;
animation-name:main-wave-anime;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.main-visial .main-wave .wave_main{
width: 100%;
display: flex;
align-items: flex-end;
}
@keyframes main-wave-anime {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}





/*動画*/
.main-visial .main_mov{
/*アニメ*/
opacity: 0;
animation-name: main_mov;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-fill-mode: forwards;

&::after{
content: '';
display: block;
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100svh;
background-image: url(../img/main_mov_back_img.webp);
background-size:cover;
background-position: center;
opacity: 0.7;
z-index: -2;
}
}
@keyframes main_mov {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.main-visial .main_mov video {
position:relative;
width: 100%;
height: 100svh;
top: 0;
left: 0;
z-index: -3;
object-fit: cover;
}





/*--------------------*/
/*----GREETINGS-----*/
/*-------------------*/
.greeting{
container-type: inline-size;
background-color: var(--color-blue-light);
padding-bottom: 50px;
padding-top: 50px;
}
.greeting .greeting-wrap .greeting_txt-name{
margin-top: 30px;
}
.greeting .greeting-wrap .greeting_txt-name span{
font-size: var(--s22);
margin-left: 20px;
}


.greeting .greeting-wrap .greeting-img{
background-image: url(../img/greeting_ph.webp);
background-size: cover;
background-position: center;
margin: 35px auto 0 auto;
  width: 100%; /* 右半分を占める感じ */
  height: 300px;
}







/*--------------------*/
/*----history-----*/
/*-------------------*/
.history{
padding-bottom: 70px;
container-type: inline-size;
background-color: var(--color-blue);
transition: background-color 1s ease;
}
.history.scrolled-to-one {
  background-color: var(--color-blue); /* 1970年代エリアの色 */
}
.history.scrolled-to-two {
  background-color: #339E9E; /* 1980年代エリアの色 */
}
.history.scrolled-to-three {
  background-color: #2A7F5D; /* 1990年代エリアの色 */
}
.history.scrolled-to-four {
  background-color: #064370; /* 2000年以降の色 */
}

.history .history-wrap{
margin-top: 50px;
}

.history-wave{
background-color: var(--color-blue-light);
}

.history .title01 .en_txt{
color: #36ACBF;
}
.history .title01 .en_txt.on::after{
color: var(--color-white);
}

.history .title01 .ja_txt{color: var(--color-white);}
.history .title01::before{background-color: var(--color-white);}

/*大枠の年代*/
.history .history-era{
font-size: var(--s50);
color: var(--color-white);
text-align: center;
margin: 10px 0;
display: block;
}


/*--------エピソード---------*/

/*中心縦の点線*/
.history .history-list-wrap{
position: relative;
}
.history .history-list-wrap::before{
content: "";
  position: absolute;
  left: 25px;
  top: 0;
  height: 100%;
  width: 2px;
margin: 0 auto;
  background: repeating-linear-gradient(to bottom, var(--color-white) 0px, var(--color-white) 2px, transparent 2px, transparent 7px);
}

/* ul */
.history .history-list{
color: var(--color-white);
margin-left: 20px;
}

/* li */
.history .history-list .item-left,
.history .history-list .item-right{
margin: 0 0 50px 0;
position: relative;
}
.history .history-list .item-left::before,
.history .history-list .item-right::before{
position: absolute;
content: "";
top:0;
left: -10%;
width: 20px;
height: 20px;
background-image: url(../img/history-point.svg);
background-size: cover;
}



/*年 */
.history .history-list .year{
font-size: var(--s40);
color: var(--color-blue-highlight);
line-height: 70%;
}
.history .history-list .year span{
font-size: var(--s14);
}

/*タイトル */
.history .history-list .title{
font-size: var(--s20);
margin: 10px 0 5px 0;
font-weight: 500;
color: var(--color-white);
}
/*写真 */
.history .history-list .ph-img{
margin-top: 15px;
padding-bottom: 10px;
}
.history .history-list .ph-img img{width: 100%;}

/* アイテムツールチップ */
.history .history-list :is(.item-tooltip-left,.item-tooltip-right){
position: relative;
margin: 0 0 30px 0;
width: 100%;
height: 40px;
}
.history .history-list :is(.item-tooltip-left,.item-tooltip-right) button{
position: absolute;
content: "";
top:0;
left: -11%;
width: 30px;
height: 40px;
border: none;
background-color:initial;
}
.tooltip {
  cursor: pointer;
background-image: url(../img/icon_click.svg);
background-repeat: no-repeat;
background-size:contain;
}
.tooltip-text {
width: 200px;
  opacity: 0; /* はじめは隠しておく */
  visibility: hidden; /* はじめは隠しておく */
  position: absolute;
left: 140px;
  transform: translateX(-50%); /* 親に対して中央配置 */
  top: 0;
  display: inline-block;
  padding: 7px;
  font-size:var(--s14);
  background: var(--color-yellow); /* 背景色 */
  color: var(--color-black);
  border-radius: 3px;
  transition: 0.3s ease-in;
text-align:left;
z-index: 10;
}
/* 吹き出しの角（左側） */
.tooltip-text::before {
  content: "";
  position: absolute;
  top: 15px;               /* 好みで上下調整 */
  left: -18px;              /* 吹き出し本体の外に少し出す */
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
border-right: 18px solid var(--color-yellow); /* ⇒ ここの数値を大きくするとしっぽが長くなる */
}
.tooltip-text h5{
font-size: var(--s18);
}
.tooltip:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
}




/*--------エピソード背景写真---------*/
.history-list-wrap.one,
.history-list-wrap.two,
.history-list-wrap.three,
.history-list-wrap.four{
background-size: 60%;
}
/* 1975 */
.history-list-wrap.one{
background-image:
url(../img/history-back-ph-01.webp),
url(../img/history-back-ph-02.webp);
background-position:
top 0% left 0,
top 50% right 0;
}
/* 1980 */
.history-list-wrap.two{
background-image:
url(../img/history-back-ph-03.webp),
url(../img/history-back-ph-04.webp);
background-position:
top 45% left 0,
top 15% right 0;
}
/* 1990 */
.history-list-wrap.three{
background-image:
url(../img/history-back-ph-05.webp),
url(../img/history-back-ph-06.webp);
background-position:
bottom 10% right 0,
bottom 50% left 0;
}
/* 2000 */
.history-list-wrap.four{
background-image:
url(../img/history-back-ph-07.webp),
url(../img/history-back-ph-08.webp);
background-position:
top 0 left 0,
top 25% right 0;
}


/*--------ギャラリー---------*/
.history-gallery {
margin: 50px 0 150px 0;
}
.history-gallery .content{
position: relative;
}
.history-gallery .swiper {
  width: 95%;
}
.history-gallery .swiper-slide {
  width: 5vw;
}

/* ナビゲーションボタン */
.history-gallery .swiper-button-next,
.history-gallery .swiper-button-prev{
color:#fff;
z-index: 10;
}
.history-gallery .swiper-button-next{
        left: auto;
        right: -20px;
width: 15px;
}
.history-gallery .swiper-button-prev{
        left: -20px;
        right: auto;
width: 15px;
}

/* ページネーション */
.history-gallery .s-p-1970-1980,
.history-gallery .s-p-1990,
.history-gallery .s-p-2000-2025{
bottom: -30px;
}
.history-gallery .swiper-pagination-bullet-active{
color: #fff;
background-color: #fff;
}













/*--------------------*/
/*----50th MOV-----*/
/*-------------------*/
.special-mov{
container-type: inline-size;
padding: 80px 0;
}
.special-mov .content{}



/*--------------------*/
/*----LOGO-----*/
/*-------------------*/
.logo-info{
container-type: inline-size;
padding: 50px 0;
}
.logo-info .logo-info-wrap{
}
.logo-info .logo-info-wrap .logo-info__img{
width: 70%;
margin: 0 auto 40px auto;
}



/*--------------------*/
/*----footer-----*/
/*-------------------*/
.footer{
position: relative;
}
.footer .footer-inner{
background-color: var(--color-blue);
text-align: center;
padding: 20px 0 20px 0;
}

.footer .footer-logo-group{
    width: 50%;
margin: 0 auto 30px auto;
}
.footer .footer-logo-group img{
margin-top: 20px;
}


.footer small{
display: block;
color: var(--color-white);
margin-top: 30px;
}

/*ページtop*/
.p_top{
width: 17%;
margin: 10px auto 0 auto;
}
.p_top a:hover{
opacity: 1;
}






.special-mov02 iframe{
width: 100%;
height: 300px;
}