@charset "UTF-8";

/* PCでは非表示 */
.pc_no{display: none;}


.content{
    width: min(80% ,1000px);
    margin-left: auto;
    margin-right: auto;
}

.w768 {width: min(90% ,768px);}

/*◎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-columns: 1fr 1fr;
}
/*◎デバイス縦*/
@media screen and (orientation:portrait) {
.main-visial .main-visial-inner{
  grid-template-areas:
    "areaA areaA"
    "areaB areaB";
}
}
/*縦550px以下（スマホ横）*/
@media screen and (max-height: 550px) {
.main-visial .main-visial-inner{
grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "areaB areaA"
    "areaB areaA";
}
}






/* ロゴマーク */
.main-visial .main-logomarc{
container-type: inline-size;
display: grid;
align-items: flex-start;
justify-content: flex-end;
}
.main-visial .main-logomarc #logomarc{
margin-top:-7vmin;
margin-right: -2.5vmin;
width: min(100cqmin, 800px);
}
/*高さ750px以下（ノートパソコン対策）*/
@media screen and (max-height: 800px) {
.main-visial .main-logomarc #logomarc{
width: min(85cqmin, 800px);
}
}
/*◎デバイス縦*/
@media screen and (orientation:portrait) {
.main-visial .main-logomarc{
grid-area: areaA;
}
.main-visial .main-logomarc #logomarc{
width: 60cqmin;
}
}
/*縦550px以下（スマホ横）*/
@media screen and (max-height: 550px) {
.main-visial .main-logomarc #logomarc{
width: 80cqmin;
}
}





/* メインコピーまわり全体囲み */
.main-visial .main_copy{
padding: 0 0 0 7vw;
display: flex;
justify-content: center;
flex-direction:column;
color: var(--color-white);
z-index: 1;
container-type: inline-size;
}
.main-visial .main_copy .main_copy-inner{
width:min(100cqmin, 650px);
container-type: inline-size;
}
/*高さ750px以下（ノートパソコン対策）*/
@media screen and (max-height: 800px) {
.main-visial .main_copy .main_copy-inner{
width: 100cqmin;
margin-bottom: 3cqmin;
}
}
/*縦550px以下（スマホ横）*/
@media screen and (max-height: 550px) {
.main-visial .main_copy .main_copy-inner{
width:65%;
}
.main-visial .main_copy{
padding: 0 0 0 5vw;
display: flex;
justify-content:flex-start;
flex-direction:row;
align-items: flex-end;
}
}
/*◎幅900px以下*/
@media screen and (max-width: 900px) {
.main-visial .main_copy{
padding: 0 0 15vw 5vw;
display: flex;
justify-content:flex-start;
flex-direction:row;
align-items: flex-end;
}
}
/*◎デバイス縦*/
@media screen and (orientation:portrait) {
.main-visial .main_copy{
grid-area: areaB;
padding: 0 7cqmin 15cqmin 7cqmin;
display: flex;
justify-content:flex-start;
flex-direction:row;
align-items: flex-end;
}
.main-visial .main_copy .main_copy-inner{
width:55cqmin;
}
}





/* 文字ロゴ画像 */
.main-visial .main_copy .main-logo-title{
width: 85cqmin;
/* アニメ */
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);
    }
}
/*高さ750px以下（ノートパソコン対策）*/
@media screen and (max-height: 800px) {
.main-visial .main_copy .main-logo-title{
width: 60cqmin;
}
}
/*縦550px以下（スマホ横）*/
@media screen and (max-height: 550px) {
.main-visial .main_copy .main-logo-title{
width: 50cqmin;
}
}



/* 見出し */
.main-visial .main_copy .main-title{
margin-top: 3.5cqmin;
display: grid;
justify-content: flex-start;
grid-template-columns: 2fr 1fr;
column-gap:1cqmin;
container-type: inline-size;
}
.main-visial .main_copy .main-title .main-title-txt{
font-size: 5cqmin;
line-height: 7cqmin;
letter-spacing: 0.3cqmin;
/*アニメ*/
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;
    }
}

/* 北海道マーク */
.main-visial .main_copy .main-title .main-title-img{
width: 80%;
margin-top: -4cqmin;
/* アニメ */
opacity: 0;
animation-name: main-title-img-anime;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 3s;
animation-fill-mode: forwards;
}
@keyframes main-title-img-anime {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*縦550px以下（スマホ横）*/
@media screen and (max-height: 550px) {
.main-visial .main_copy .main-title .main-title-img{
width: 60%;
}
}




/* 本文 */
.main-visial .main_copy .main_txt{
font-size: max(2.8cqmin, var(--s16));
line-height: max(4.5cqmin, var(--s28));
letter-spacing: 0.2cqmin;
margin-top: 1cqmin;
/*アニメ*/
opacity: 0;
animation-name:main_txt-anime;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 3s;
animation-fill-mode: forwards;
}
@keyframes main_txt-anime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*◎幅990px以下*/
@media screen and (max-width: 990px) {
.main-visial .main_copy .main_txt br{
display: none;
}
}
/*縦550px以下（スマホ横）*/
@media screen and (max-height: 550px) {
.main-visial .main_copy .main_txt{
font-size: var(--s14);
line-height: var(--s22);
}
}




/* wave */
.main-visial .main-wave{
position:absolute;
z-index: 1;
width: 100%;
bottom: 0;
/*アニメ*/
opacity: 0;
animation-name:main-wave-anime;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-delay: 3s;
animation-fill-mode: forwards;
}
@keyframes main-wave-anime {
    0% {
        opacity: 0;
        transform: translateY(90px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*縦550px以下（スマホ横）*/
@media screen and (max-height: 550px) {
.main-visial .main-wave{
bottom: -3vw;
}
}



/*動画*/
.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;
}
.main-visial .main_mov::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{
position: relative;
container-type: inline-size;
background-color: var(--color-blue-light);
padding: 50px 0 150px 0;
margin-top: -5px;
}
.greeting .greeting-wrap{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap:10%;
}
.greeting .greeting-wrap .greeting_txt-name{
margin-top: 30px;
}
.greeting .greeting-wrap .greeting_txt-name span{
font-size: var(--s24);
margin-left: 20px;
}


.greeting .greeting-wrap .greeting-img{
background-image: url(../img/greeting_ph.webp);
background-size: cover;
background-position: center;
position: absolute;
  right: 0;
  width: 47vw; /* 右半分を占める感じ */
  height: 58%;
}

/*◎1100px以下*/
@media screen and (max-width: 1100px) {
.greeting .greeting-wrap{
grid-template-columns: 1fr;
column-gap:0;
}
.greeting .greeting-wrap .greeting-img{
margin: 35px auto 0 auto;
position:initial;
  width: 70%; /* 右半分を占める感じ */
  height: 450px;
}
}



/*--------------------*/
/*----history-----*/
/*-------------------*/
.history{
padding-bottom: 100px;
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: 100px;
}

.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(--s100);
color: var(--color-white);
text-align: center;
margin: 20px 0;
display: block;
}


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

/*中心縦の点線*/
.history .history-list-wrap{
position: relative;
}
.history .history-list-wrap .content{
}

.history .history-list-wrap::before{
content: "";
  position: absolute;
  left: 0;
right: 0;
  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 10px);
}



.history .history-list{
display: flex;
    gap: 70px;/* 真ん中のあき */
color: var(--color-white);
justify-content: center;
}

/* java用 */
.history-left-col,
  .history-right-col {
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }


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

/*タイトル */
.history .history-list .title{
font-size: var(--s24);
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 .item-left,
.history .history-list .item-right{
position: relative;
}
.history .history-list .item-left::before,
.history .history-list .item-right::after{
position: absolute;
content: "";
top:0;
width: 20px;
height: 20px;
background-image: url(../img/history-point.svg);
background-size: cover;
}

/* アイテム左 */
.history .history-list .item-left::before{
right: -45px;
}

/* アイテム右 */
.history .history-list .item-right::after{
left: -45px;
}


/* アイテムツールチップ */
.history .history-list :is(.item-tooltip-left,.item-tooltip-right){
position: relative;
margin: 10px 0;
height: 10px;
}
.history .history-list :is(.item-tooltip-left,.item-tooltip-right) button{
position: absolute;
content: "";
top:0;
width: 30px;
height: 40px;
border: none;
background-color:initial;
}
.history .history-list .item-tooltip-left button{
right: -50px;
}
.history .history-list .item-tooltip-right button{
left: -50px;
}

.tooltip {
  cursor: pointer;
background-image: url(../img/icon_click.svg);
background-repeat: no-repeat;
background-size:contain;
}
.tooltip-text {
width: 140px;
  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;
}




/*--------エピソード背景---------*/
/* 1975 */
.history-list-wrap.one{
background-image:
url(../img/history-back-ph-01.webp),
url(../img/history-back-ph-02.webp);
background-size: 40%;
background-position:
top 20% left 0,
top 40% right 0;
}
/* 1980 */
.history-list-wrap.two{
background-image:
url(../img/history-back-ph-03.webp),
url(../img/history-back-ph-04.webp);
background-size: 40%;
background-position:
top 60% left 0,
top 70% right 0;
}
/* 1990 */
.history-list-wrap.three{
background-image:
url(../img/history-back-ph-05.webp),
url(../img/history-back-ph-06.webp);
background-size: 40%;
background-position:
bottom 30% right 0,
top 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-size: 40%;
background-position:
top 30% left 0,
top 0% right 0;
}



/*--------ギャラリー---------*/
.history-gallery {
margin: 50px 0 100px 0;
}
.history-gallery .content{
position: relative;
}
.history-gallery .swiper {
  width: 100%;
}
.history-gallery .swiper-slide {
  width: 10vw;
}
@media screen and (max-width: 768px) {
  .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: -50px;
}
.history-gallery .swiper-button-prev{
        left: -50px;
        right: auto;
}

/* ページネーション */
.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: 100px 0;
}
.special-mov .content{}


/*--------------------*/
/*----LOGO-----*/
/*-------------------*/
.logo-info{
container-type: inline-size;
padding: 100px 0;
}
.logo-info .logo-info-wrap{
width: min(70%,700px);
margin: 0 auto 0 auto;
}
.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: 50px 0;
}

.footer .footer-logo-group{
    width: min(70% ,600px);
display: grid;
grid-template-columns: 1fr 2fr;
column-gap:10%;
  place-content: center;
  place-items: center;
margin: 0 auto 50px auto;
}

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

/*ページtop*/
.p_top{
position:absolute;
bottom: 20px;
right: 20px;
}
.p_top a:hover{
opacity: 1;
}






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