/*
Theme Name: apolio
Theme URI: 
Description: tachibanaportfolio2024のHPテーマです
Version: 1.0
Author: tachibanaportfolio2024
Autor URI: 
*/

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
}

div {
	font-family: "Zen Kaku Gothic New", sans-serif;
}

li {
    list-style: none;
}

.btn {
    transition: all 0.5s;
    cursor: pointer;
}

.btn:hover {
    opacity: 0.5;
}

img{
    width: 100%;
    vertical-align: bottom!important;/* imgの下に何故か入る白枠を消す */

}

/* フォント設定 */

a {
    text-decoration: none;
    color : inherit;
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight:300;
    font-style: normal;
    letter-spacing: 2px;
}/* 英語 */

p{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}/* 日本語 */

li{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}/* 日本語 */

h1,h2{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-optical-sizing: auto;
    font-weight:500;
    font-style: normal;
    letter-spacing: 2px;
}/* 日本語 */


h3{
    line-height: 1.8;
    letter-spacing: 2.5px;
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
}/* 英語 */

/*  アニメーション設定 */
.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:1.7s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    } 

.fadeIn {
    animation-name:fadeInAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      transform: translateY(0px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }

.fadeIn2Left {
        opacity: 0;
        transform: translateX(-100px);
        animation-name: fadeIn2;
        animation-duration: 1s;
        animation-fill-mode: forwards;
}

@keyframes fadeIn2 {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

 /* header共通設定 */
 .header {
    width: 100%;
    z-index: 8888;
    background-color: #fff;
}

.headerContainer {
    width: 100%;
    margin: 0 auto;
    position: relative;
    color: #fff;
}

.headerLeft {
   width: 210px;
   margin: 0 auto;
   padding: 20px 0px;
}

.smHumbergar {
    position: fixed;
    top: 30px;
    right: 5%;
    color: #000;
    background-color: #FFC602;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);
    z-index: 10000;
}

.openBtn p {
    font-size: 16px;
    padding: 8px 18px;
    letter-spacing: 1.5px;
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
}

/* headerハンバーガーメニュー部分設定 */


#js-nav {
    display: none;
}

#js-nav.is-active {
    display: block;
    z-index: 99;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

#hm-close {
    display: none;
}

#hm-close.is-active{
    display: block;
}

#hm-open{
    display: block;
}

#hm-open.is-active{
    display: none;
}

.openBtn {
    position: relative;
    cursor: pointer;
    width: 100%;
    height:100%;
}

/* ハンバーガー中身 白文字版 */

.list-back {
    background-color:#fff;
    height: 100vh;
    z-index: 99;
}

.headrtList {
    padding-top: 20vh;
    padding-right: 3vw;
    padding-left: 3vw;
}

.spList p{
    font-optical-sizing: auto;
    font-size: 1rem;
    padding-bottom: 20px;
    letter-spacing: 0.8px;
}

/* エリア背景/カラー設定　*/
.shiru {
    background-image: url(img/common/back_blue@2x.png);
    background-size: contain;
    background-color:rgba(255,255,255,0.7);
    background-blend-mode:lighten;
}

.manabu {
    background-image: url(img/common/back_green@2x.png);
    background-size: contain;
    background-blend-mode:lighten;
    color:#fff;
    background-color:#6BD05E;
}

.mid_text{
    background-image: url(img/common/back_blue@2x.png);
    background-size: cover;
    background-color:rgba(255,255,255,0.7);
    background-blend-mode:lighten;
    text-align: center;
}

.tanken {
    background-image: url(img/common/back_orange@2x.png);
    background-size: cover;
    background-blend-mode:lighten;
    color:#000;
    background-color:#FF8537;
}


.shiru-page{
    background-image: url(img/common/back_blue@2x.png);
    background-size: contain;
    background-color:rgba(255,255,255,0.7);
    background-blend-mode:lighten;
}

.manabu-page{
    background-image: url(img/common/back_green@2x.png);
    background-size: contain;
    background-blend-mode:lighten;
    color:#fff;
    background-color:#6BD05E;
}

.manabu-single-page {
    background-image: url(img/common/back_greenwhite@2x.png);
    background-size: contain;
    background-blend-mode:lighten;
    color:#000;
}

 /* トップページテキスト共通設定 */
 .area_top h2 {
    font-size: 16px;
}

.area_top p{
    font-size: 16px;
    padding: 0px 0px 20px;
}

.area_top a{
    height: auto!important;
}

.area_top a img {
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.12);
}

/* 記事部分共通 */
.article_area {
    position: relative;
}

.manabu_article {
    display: block;
}

.article_seal {
    position: absolute;
    top: -0px;
    right: 0px;
    left: 0px;
    z-index: 10;
    width: 63px;
    display: block;
    margin: auto;
}


.article_img {
    margin-top: 20px; 
    width: 100%;
    aspect-ratio: 2 / 1 !important;
    overflow: hidden;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.12);
}

.manabu_top_seal {
    margin-top: 20px;
} 

.article_area h3{
    font-size: 18px;
    margin: 15px 15px 10px 15px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-optical-sizing: auto;
    font-weight:500;
    letter-spacing: 3.0px;
    line-height: 1.5;
}

.category {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;
}

.category_box p{
    padding: 3px 5px;
    font-size: 14px;
}

.category_box {
    margin: 0px 5px;
}

.category_shiru {
    background-color: #CEE5FA;
}/* shiru_color */

.date {
    margin-left: 15px;
    margin-top: 5px;
    letter-spacing: 1.5px;
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
    font-size: 13px;
    color:#848484;
}


.shiru_title {
    width: 100%;
    padding-top: 30px;
}

.shiru_top h2 {
    color: #59B0FA;
}

/* manabuArea */
.manabu_top_right {
    color: #000;
}

.manabu_article h3{
    color: #000;
}

.category_manabu {
    background-color: #90DC86;
}

.date_manabu {
    color: #fff;
}

.think_top a{
    display: block;
}

/* mid_text */
.marker{
    background: linear-gradient(transparent 30%, #CFE6FB 30%);
}

/* footer */
.footer_logo {
    width: 210px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.footer-list li{
    padding: 0 20px 20px 20px;

}

.footer-list p{
    color: #444242;
    font-weight: 500;
}

.footer_bottom {
    font-size: 12px;
    color: #7C7B7B;
    font-weight: 500;
}

/* archive-page 共通 */
/* page-top */
.page-top {
    padding: 60px 0 40px 0;
    text-align: center;
}

.page-title {
    padding-bottom: 10px;
}

.page-top h2{
    font-size: 16px;
}

.shiru-page-top{
    width: 320px;
    margin: 0 auto;
}

.manabu-page-top {
    width: 330px;
    margin: 0 auto;
}

.shiru-page-top h2{
    color: #59B0FA;
}

.manabu-page-top h2 {
    color: #fff;
}

/* page-bottom */
.archive-page-contents {
    padding: 10px 0 40px 0!important;
    margin: 0 auto!important;
}

/* single-page 共通 */
.article-single-continer {
    width: 60% !important;
    min-width: 700px;
    padding: 60px 0px!important;
}

.as-titlearea h2{
    font-size: 16px;
    padding-left: 5px;
}

.shiru-as-titlearea h2{
    color: #59B0FA;
}

.manabu-as-titlearea h2{
    color:#55C647;
}

.as-titlearea h1{
    font-size: 2.0rem;
    padding: 2px 0px;
}

.as-main-img-area {
    padding: 20px 0 60px 0px;
    position: relative;
}

.as-main-seal {
    width: 90px;
    position: absolute;
    right: 0px;
    left: 0px;
    z-index: 10;
    display: block;
    margin: auto;
}

.as-main-img {
    margin-top: 30px;
    width: 100%;
    aspect-ratio: 2 / 1 !important;
    overflow: hidden;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.12);
}


/* explanation-area */
.explanation-area {
    padding-top: 80px;
    position: relative;
}

.explanation {
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.12);
}

.explanation-continer {
    padding: 60px;
}

.explanation-li {
    display: flex;
    letter-spacing: 2px!important;
    padding-bottom: 5px;
}

.explanation-title {
    font-weight: 500;
    width: 100px;
    display: block;
}

.shiru-explanation-title {
    color: #398FD8;
}

.manabu-explanation-title {
    color: #55C647;
}

.explanation-date {
    margin-left: 0px;
}

.explanation-category {
    margin-left: 0px;
}

.explanation-category_box {
    margin: 10px 10px 0px 0px;
    padding: 5px 10px 0px;
}

.single-return {
    padding-top: 40px;
}

.category_manabu {
    background-color: #84E077;
}

.blank {
    width: 100%;
    height: 20px;
}

.manabu_btn {
    display: block;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.12);
}


/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999999;
      text-align:center;
      color:#fff;
      background-image: url(img/common/back_blue@2x.png);
    background-size: contain;
    background-color:rgba(255,255,255,0.7);
    background-blend-mode:lighten;
    }

    /* Loading画像中央配置　*/
    #splash_logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Loading アイコンの大きさ設定　*/
    #splash_logo img {
        width:300px;
    }

@media screen and (min-width : 1024px) {

    /* ここから基本設定　*/

    .pc {
        display: block;
    }

    .tab {
        display: none;
    }

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

    .continer {
        width: 80%;
        max-width: 1350px;
        display: block;
        margin: 0 auto;
        padding-top: 100px;
        padding-bottom: 100px;
    }
	
	.pc-margintop-20{
		margin-top:20px;
	}

     /* ここからフォント設定 */

    p{
        line-height: 1.8;
        letter-spacing: 1.5px;
    }

    li{
        line-height: 1.8;
        letter-spacing: 1.5px;
    }

    h1 {
        font-size: 20px;
    }

    .top20 {
        position: absolute;
        top: -20px!important;
    }
    
    /* ここからトップページ　shiru　*/
    .shiru-continer{
        display: flex;
    }

    .shiru_top {
        width:19%;
        min-width: 230px;
    }

    .shiru_top h2{
        padding: 40px 0px 10px;
    }
    
    .top_shiru_article {
        width: calc(50% - 4%);
        margin: 0px 2% 40px 2%;
    }

    .shiru_bottom {
        margin-left: 5%;
        /* width: 70%; */
        display: flex;
        flex-wrap: wrap;
    }

    /* ここからトップページ manabu */
    .manabu_top {
        display: flex;
			padding-bottom: 40px;
    }

    .manabu_top_left {
        width: 30%;
        padding-right: 5%;
        min-width: 400px;
    }

    .manabu_top_left h2{
        padding: 10px 0px 10px!important;
    }

    .manabu_bottom {
        display: flex;
        flex-wrap: wrap;
    }

    .top_manabu_article {
        width: calc(33% - 1%);
        margin: 0px 0 40px 0;
    }

    .top_manabu_article:nth-child(2){
        margin: 0 2%;
    }

    .manabu_btn {
        width: 19%!important;
        min-width: 230px;
        margin: 0 auto;
        display: block;
    }

    /* ここからthink */
    .think-continer {
        display: flex;
    }

    .think_img_area {
        width: 20%;
    }

    .think_img_box {
        aspect-ratio: 3 / 2 !important;
        overflow: hidden;
    }

    .think_text_area {
        width: 60%;
        padding: 100px 0;
    }

    .think_top {
        text-align: center;
    }

    .think_title {
        width: 51.3%;
        margin: 0 auto;
        max-width: 420px;
        padding-bottom: 20px;
    }

    .think_top a {
        width: 34%;
        margin: 0 auto;
        padding-top: 20px;
    }

    .think_text_area{
        position: relative;
    }

    .think_top  {
        position: absolute;
        top:0;
        bottom:0;
        right: 0;
        left: 0;
        margin: auto;
        display: block;
        height: 290px;
    }

    /* mid_text */
    .mid_text-continer h3{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 600;
        font-size: 25px;
        padding-bottom: 20px;
    }

    /* taiken */
    .tanken_title{
        width: 35%;
        min-width: 460px;
        max-width: 500px;
        padding-bottom: 20px;
    }

    .tanken_top{
        position: relative;
    }

    .tanken_top p{
        padding-bottom: 0px;
    }

    .tanken_top a{
        width: 174px;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }

    /* footer */
    .footer-continer {
        width: 80%;
        margin: 0 auto;
        padding: 50px 0 20px 0;
        text-align: center;
    }

    .footer-list {
        display: flex;
        width: 817px;
        margin: 0 auto;
    }

    /* archive */
    .archive-contents {
        width: calc(33.333% - 2%);
        margin: 0px 1% 40px 1%;
    }

    .archive-page-contents {
        display: flex!important;
        flex-wrap: wrap!important;
    }

    .manabu_archive_article {
        width: calc(33.333% - 2%);
        margin: 0px 1% 40px 1%;
    }

}


@media screen and (max-width : 1024px) and (min-width : 690px) {

    /* ここから基本設定　*/
    
    .pc {
        display: block;
    }

    .sp {
        display: none;
    }

    .tab{
        display: block;
    }

    .tab_non {
        display: none;
    }
    

    .continer {
        width: 80%;
        display: block;
        margin: 0 auto;
        padding: 130px 0px;
    }

    /* ここからフォント設定 */

    p{
        line-height: 1.8;
        letter-spacing: 1.5px;
    }

    li{
        line-height: 1.8;
        letter-spacing: 1.5px;
    }

    h1 {
        font-size: 20px;
    }

    /* トップページテキスト共通設定 */
    .area_top h2 {
        font-size: 16px;
        padding: 20px 0px 10px;
    }

    .area_top p{
        font-size: 16px;
        padding: 0px 0px 20px;
    }

    /* ここからトップページ　shiru　*/
    .shiru-continer{
        display: flex;
    }

    .shiru_top {
        width: 30%;
    }

    .shiru_title {
        width: 100%;
    }

    .shiru_top h2 {
        color: #59B0FA;
    }

    /* ここからトップページ　shiru　*/
    .shiru-continer{
        display: flex;
    }

    .shiru_top {
        width:19%;
        min-width: 230px;
        height: 300px;
        position: sticky;
        top: 0px;
    }

    .shiru_bottom {
        margin-left: 10%;
    }

    .article_seal {
        top:-20px;
    }

    .article_area {
        position: relative;
        padding-bottom: 20px;
    }
    
    /* ここからトップページ manabu */
    
    .manabu_top_left {
        width: 30%;
        padding-right: 5%;
        min-width: 400px;
    }

    .manabu_top_left h2{
        padding: 20px 0px 10px!important;
    }

    .manabu_bottom {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .top_manabu_article {
        width: calc(50% - 4%);
        margin: 0px 2% 40px 2%;
    }

    .manabu_seal {
        top:-15px;
    }

    .manabu_btn {
        width: 19%;
        min-width: 230px;
        margin: 0 auto;
        display: block;
    }

    /* ここからthink */

    .think_img_area_nopc {
        display: flex;
    }

    .think_img_box {
        width: 33.33%;
        aspect-ratio: 3 / 2 !important;
        overflow: hidden;
    }

    .think_text_area {
        width: 80%;
        display: block;
        margin: 0 auto;
        padding: 130px 0px;
    }

    .think_top {
        text-align: center;
    }

    .think_title {
        width: 51.3%;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .think_top a {
        width: 34%;
        margin: 0 auto;
        padding-top: 20px;
    }

    /* mid_text */
    .mid_text-continer h3{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 600;
        font-size: 25px;
        padding-bottom: 20px;
    }

    /* taiken */
    .tanken_title{
        width: 35%;
        min-width: 460px;
        max-width: 500px;
        padding-bottom: 20px;
    }

    .tanken_top a{
        width: 174px;
        display: block;
    }

    /* footer */

    .footer-continer {
        width: 80%;
        margin: 0 auto;
        padding: 50px 0 20px 0;
        text-align: center;
    }

    .footer-list li{
        padding: 0px;
    }

    .footer_bottom {
        padding-top: 20px;
    }

    /* archive */
    .archive-page-contents {
        display: flex;
        flex-wrap: wrap;
    }

    .archive-contents {
        width: calc(50% - 4%);
        margin: 0px 2% 20px 2%;
    }

    .archive-article_img {
        margin-top: 0px;
    }

}

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

    /* ここから基本設定　*/

   .tab{
        display: none;
   }

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

   .sp {
       display: block;
   }

   .pc-block {
       display: none;
   }

   .continer {
       width: 85%;
       display: block;
       margin: 0 auto;
       padding: 80px 0px;
   }

   /* ここからフォント設定 */

   p{
       line-height: 1.8;
       font-size: 14px;
       letter-spacing: 2px;
   }

   li{
    line-height: 1.8;
    font-size: 14px;
    letter-spacing: 2px;
     }

   h1 {
       font-size: 20px;
   }

    /* ここからheader設定 */
    .headerLeft {
       width: 214px;
   }

   .smHumbergar {
    top:25px;
   }

   .openBtn p {
    font-size: 14px;
    padding: 8px 10px;
    letter-spacing: 1.2px;
   }

   .list-back {
    width: 100vw;
   }

   .spList p {
    font-optical-sizing: auto;
    text-align: center;
    font-size: 1.1rem;
    padding-bottom: 25px;
   }

   /* トップページテキスト共通設定 */
    .area_top h2 {
        font-size: 16px;
        padding: 20px 0px 10px;
    }

    .area_top p{
        font-size: 16px;
        padding: 0px 0px 20px;
    }

    /* ここからトップページ　shiru　*/

    .shiru_top {
        width: 100%;
    }

    .shiru_title {
        width: 100%;
    }

    .shiru_top h2 {
        color: #59B0FA;
    }

    .shiru_top {
        width:90%;
        margin: 0 auto;
    }

    .shiru_bottom {
        margin-top: 20px;
    }

    .article_seal {
        top:-20px;
    }

    .article_area {
        margin-top: 40px;
        display: block;
    }

    .shiru_top h2{
        margin-top: 30px;
    }

    .shiru_title {
        padding-top: 0px;
    }

    .manabu_top_sp {
        margin: 30px 10px 0px;
    }

    /* ここからthink */

    .think_img_area_nopc {
        width: 50%;
    }

    .think_img_box {
        aspect-ratio: 3 / 2 !important;
        overflow: hidden;
    }

    .think_text_area {
        width: 85%;
       display: block;
       margin: 0 auto;
       padding: 80px 0px;
    }

    .think-continer {
        position: relative;
    }

    .think_right {
        position: absolute;
        right: 0px;
        bottom:0px;
    }

    .think_top {
        text-align: center;
    }

    .think_title {
        width: 65.7%;
        margin: 0 auto;
        padding-bottom: 20px;
        min-width: 263px;
    }

    .think_top a {
        margin: 0 auto;
        padding: 20px 2.5% 0 2.5%;
    }

    /* mid_text */
    .mid_text-continer h3{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 600;
        font-size: 25px;
        padding-bottom: 20px;
    }

    .mid_text-continer {
        width: 90%;
    }

    /* taiken */
    .tanken_title{
        width: 100%;
        padding-bottom: 20px;
        margin: 0 auto;
    }

    .tanken_top a{
        width: 174px;
        display: block;
        padding-top: 10px;
    }

    /* footer */

    .footer-continer {
        width: 85%;
        margin: 0 auto;
        padding: 70px 0 20px 0;
        text-align: center;
    }

    .footer-list li{
        padding: 0px;
    }

    .footer_bottom {
        padding-top: 20px;
    }

    /* archive-page 共通 */
    /* page-top */
    .page-top {
        width: 90%;
        max-width: 320px;
        padding: 60px 0 0px 0;
        margin: 0 auto;
    }

    /* single-page 共通 */
    .article-single-continer {
        width: 85%!important;
        padding: 60px 0px!important;
        min-width: 200px!important;
    }

    .as-main-seal {
        width: 60px;
    }

    .as-main-img {
        margin-top: 18px;
    }

    .as-titlearea h1 {
        font-size: 1.6rem;
    }

    .as-titlearea h2 {
        font-size: 15px;
        padding-left: 3px;
    }

    .explanation-continer {
        padding: 30px;
    }

    .explanation-area {
        padding-top: 40px;
    }

    .as-main-img-area {
        padding: 20px 0 40px 0px;
    }

    #splash_logo {
        width: 70%;
    }
    
    #splash_logo img{
        width: 100%;
    }
}



    /* 2025.01.23追記 */

@media screen and (max-width: 690px) {
	
	.explanation-li {
    display: block !important;
    letter-spacing: 2px !important;
    padding-bottom: 10px !important;
}
	
}