@charset "utf-8";

/*======================================================
ヘッダー
======================================================*/
header{
    position: relative;
}

.heading-head{
    width:90%;
    @media(min-width:768px){
    max-width:40%;
    }
    position: absolute;
    top:0;
    left:0;
}

.main-image img{
    width:100%;
}

.head-copy{
    position:absolute;    
    left:20px;
    bottom:80px;
    width:38%;  
    @media(min-width:768px){
        left:60px;
        bottom:30%;        
    }
}

.heading-sec{
    font-family:var(--marugo);
    color:var(--main-blue);
    font-size:clamp(3.0rem,4.0vw,4.0rem);
    text-align: center;
    margin-bottom:1em;
}

/*======================================================
ナビゲーション（PCの場合のみ表示）
======================================================*/

.sub-nav{
    @media(max-width:767px){
        display: none;
    }
    z-index:10;
    position:fixed;
    right:0;
    top:0;
    background-color: #fff;
    width:80px;
    text-align: center;
    box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.3);
    li{
        padding:1.1em;
        border-bottom:1px solid var(--main-blue);
    }
    /* img{
        max-width:46px;
    } */
    li.nav-humb{
        padding:30px 0;
    }
    li.nav-entry{
        padding:1em 4px;
    }


/* LINEの縦書き部分 */

    .text-tate{
        line-height: 1.2em;
        margin-top:10px;
        color:#00c84a;
        font-weight: bold;
        font-size:1.4rem;
    }
}


/* -------------------
ハンバーガーmenu
------------------- */

.hamb {
  position: fixed;
  cursor: pointer;
  z-index: 300;
  right: 4px;
  top: 24px;
  width: 35px;
  height: 22px;
  transform: translate(-50%, -50%);
}

.black-bg h2{
    margin-left:80px;
    color:var(--main-blue);
}


.black-bg ul li {
  /* text-align: right; */
  padding: 10px 80px 10px 0;
}

.black-bg ul li a {
  color: var(--main-blue);
  font-size: 1.6rem; 
  font-weight: bold;
  display: block;
  border:1px solid var(--main-blue);
  padding:8px;
  text-decoration: none;
  background: #fff;
  &::before{
    content:"";
      display: inline-block;
        border-style: solid;
        border-width: 7px 0 7px 12px;
        border-color: transparent transparent transparent var(--main-blue);
        margin-right:6px;
  }
  &:hover{
    background: var(--bg-blue);
  }
}

.line {
  position: absolute;
  right: 0;
  width: 35px;
  height: 5px;
  background-color: var(--main-blue);
  top: 0px;
  border-radius: 8px;
}

.line:nth-child(2)  {
  width: 35px;
  top: 12px;
}

.line:nth-child(3)  {
  width: 35px;
  top: 24px;
}

.black-bg {
  position: fixed;
  z-index:8;
  background: #EFEFEF;
  top: 0;
  right: -340px;
  width: 340px;
  /* height: 100%; */
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  padding:20px;
}

.black-bg.open {
  opacity: 1;
  visibility: visible;
  right: 0;
}

#hamb.active{
    .line {
        background-color: var(--main-blue);
    }
    .line:nth-child(1){
        -webkit-transform: translateY(12px) rotate(-45deg);
        transform: translateY(12px) rotate(-45deg);    
    }
    .line:nth-child(2){
        opacity:0;
    }
    .line:nth-child(3){
        -webkit-transform: translateY(-12px) rotate(45deg);
        transform: translateY(-12px) rotate(45deg);
    }


}
/*アニメーション*/
.animation {
  transition: all .6s;
}



/*======================================================
メイン
======================================================*/


/*----------------------------------------
メインイメージ部分
----------------------------------------*/

.main-message{
    max-width:1200px;
    margin:0 auto;
    @media(min-width:768px){
        padding:1em 6em;
    }
    container-type: inline-size;
}

.main-message-copy{
    text-align: center;
    font-weight: bold;
    font-size:clamp(2.0rem,3.2vw,3.2rem);
    margin-bottom:0.5em;
}

.main-message-copy_sub{
    @media(min-width:768px){
        text-align:center;
    }
    font-weight: bold;
    font-size:clamp(1.6rem,2.0vw,2.0rem);
    margin-bottom:40px;
}

@media(min-width:768px){
    .main-message-story__wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:2em 6em;
    }
}

.main-message-story{
    margin-bottom:2em;
}

.heading-inner{
    color:var(--main-blue);
    font-family: var(--marugo);
    font-size:clamp(1.8rem,2.6vw,2.6rem);
    margin-bottom:1em;
}

.heading-underline span{
    background:linear-gradient(transparent 60%, var(--yellow-light) 0%);
}

/*======================================================
報告バナーエリア
======================================================*/
.bn-report{
    display:block;    
    a{
        display: block;
    }
}


/*======================================================
北九州市構想
======================================================*/

.plan{
    background: url(../img/index/bg-plan.jpg) no-repeat center top;
}

.plan-logo{
    text-align: center;
    img{
        width:120px;
    }
}

.heading-plan-white{
    color:#fff;
    text-align: center;
    font-family: var(--marugo);
    font-size:clamp(2.0rem,3.8vw,3.8rem);
}

.plan-inner{
    background: #fff;
    border-radius: 20px;
    padding:40px;
    max-width:1200px;
    margin:20px auto 0;
}

.heading-plan{
    text-align: center;
    font-family: var(--marugo);
    margin-bottom:1em;
    font-size:clamp(2.0rem,3.0vw,3.0rem);
}
.plan-inner-text{
    @media(min-width:768px){
        display: grid;
        gap:1em 2em;
        grid-template-columns: 2fr 1fr;
    }
    dl{
        margin-bottom:1em;
    }
    dl > dt{
        font-size:clamp(16px,3.0vw,3.0rem);
        font-weight: bold;
    }
    dl > dd{
        font-size:clamp(16px,1.8vw,1.8rem);
    }
}


/*======================================================
プロフィール
======================================================*/

.profile{
    max-width:1200px;
    margin:auto;
    padding:6em 1em;
}

.profile-title-image{
    text-align: center;
    max-width:600px;
    margin:0 auto 80px;
}

.heading-profile-name{
    color:var(--main-text);
    font-size:clamp(2.0rem,5.0vw,5.0rem);
    line-height: 1.5em;
    span{
        color:var(--main-blue);
        font-size:clamp(2.0rem,6.0vw,6.0rem);
    }
}

.heading-profile-yahata{
    font-family:var(--marugo);
    font-size:clamp(2.0rem,3.6vw,3.6rem);
    margin-bottom:1em;
}

@media (min-width:900px) {
    .profile-wrapper{    
        display: grid;
        grid-template-columns: 4fr 6fr;
        gap:40px;
    }
    .profile-image{
        order:1;
    }
    .profile-text{
        order:2;
    }
}

.profile-image{
    container-type: inline-size;
    text-align: center;
}

@container(min-width:600px){
    .profile-image{
        img{
            max-width:50%;
        }
    }
}


.profile-history,.profile-about{
    dl{
        display: grid;
        grid-template-columns: auto 1fr;
        width: max-content;
        max-width: 100%;
        /* padding: 1em 2rem; */
        line-height: 2;
    }
    dt{
        padding-right:1em;
        text-align-last:justify;
    }
}

.profile-history{
    dt{
        color:var(--main-blue);
    }
}

.profile-about{
    border-top:1px solid var(--main-blue);
    border-bottom:1px solid var(--main-blue);
    padding:1em 0;
    margin:2em 0;
    img{
        width:100px;
    }
    dt{
        font-weight: bold;
    }
}

/* コンテナクエリーで指定：profile-aboutが670pxの時に */

.profile-text{
    container-type: inline-size;
}
.profile-about{
    @container(min-width:670px){
        display:grid;
        grid-template-columns: 87% 1fr;
    }
    .profile-marumaru-s{
        text-align: center;
    }
}


/*======================================================
footer
======================================================*/

footer{
    position: relative;
}

.foot-info{
    background:  linear-gradient(270deg, #003e90, #0068b6);
    color:#fff;
    padding:30px 0;
}

.foot-info-inner{
        max-width:1000px;
    margin-inline: auto;
    padding-inline:1em;
}

.foot-contact{
    display: grid;
    @media(min-width:768px){
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.copyright{
    background: #fff;
    color:var(--main-text);
    padding:40px 0;
    max-width:1000px;
    margin-inline: auto;
    padding-inline:1em;
    container-type: inline-size;
}

.foot-sns{    
        display:grid;
        grid-template-columns: auto 1fr;
        column-gap:20px;
        @container(max-width:600px){
            column-gap:10px;
        }
    ul{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap:20px;
        max-width:242px;
        @media(max-width:767px){
            text-align: center;
            gap:10px;
        }
    }
    img{
        height:40px;
    }
    margin-bottom:50px;
}

.line-text{
    font-size:clamp(1.4rem,2.4vw,2.4rem);
    line-height: 1.2em;
    align-content: center;
}

#pageTop{
    position: absolute;
    right:10px;
    top:-20px;
    @media(min-width:768px){
        right:100px;
        top:-20px;
    }
    cursor: pointer;
    img{
        max-width:200px;
        @media(max-width:767px){
            width:160px;
    }
    }
    
}