@charset "utf-8";

/*------------------------------------------------------------------------------
Css name: content.css
Css info: コンテンツスタイル
------------------------------------------------------------------------------*/
/*//////////////////////////////////////////////////////// */
/* 共通-------------*/
/*//////////////////////////////////////////////////////// */

/* アニメーション ------------------------------*/

/*スクロールフェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fade_on {
    animation-name: fade_on;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes fade_on {
    0% {
        opacity: 0; 
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        -ms-transition: all 1s;
        transition: all 1s;        
        }
    100% {
        opacity: 1;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        -ms-transition: all 1s;
        transition: all 1s;      
        transform: translate(0);
        }
}
 
/*上下の動きを指定*/
.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}
 
/*左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(50px);}
.slide-left {transform: translateX(-50px);}

/*フェードインアニメーションの指定*/
.fadeinanime{
    animation-name: fadeInAnime;
    animation-duration: 5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
@keyframes fadeInAnime {
    0% {
        opacity: 0; 
        -webkit-transition: all 1s ease-in;
        -moz-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;
        -ms-transition: all 1s ease-in;
        transition: all 1s ease-in;   
        }
    100% {
        opacity: 1;
        -webkit-transition: all 1s ease-in;
        -moz-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;
        -ms-transition: all 1s ease-in;
        transition: all 1s ease-in;   
        }
}

/*//////////////////////////////////////////////////////// */
/* HOME-------------*/
/*//////////////////////////////////////////////////////// */

/*--- home-top ------------------------------*/

/* 「夢・挑戦・達成」を応援する「通信制高校」 */
@media screen and (max-width:767px){/*スマホ用指定*/

    #home-index-box .txt-s1 img {
        width: 234px;
        height: auto;
        margin: 0 auto 20px;
        max-width: 80%;
        display: block;
    }
    #home-index-box .txt-s1 .img-pc {
        display: none;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    #home-index-box .txt-s1 img {
        width: 613px;
        margin: 0 auto 20px;
        display: block;
    }
    #home-index-box .txt-s1 .img-sp {
        display: none;
    }
}

/* home-index */
@media screen and (max-width:767px){/*スマホ用指定*/

    /* index */
    #home-index-box .ttl-s1 img {
        width: 98px;
        margin: 0 auto 12px;
        max-width: 80%;
        display: block;
    }
    #home-index {
        margin-bottom: 40px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    /* index */
    #home-index-box .ttl-s1 img {
        width: 98px;
        margin: 0 auto 12px;
        display: block;
    }
    #home-index-box #home-index {
        margin-bottom: 70px;
    }
}
/* index item */
#home-index .item-box {
    position: relative;
    width: 600px; /* 640px - 20px×2（余白）*/
    max-width: calc(100% - 40px);
    margin: 0 auto 14px;
    border-radius: 20px;
}
#home-index .item-box a {
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 2px 24px;
    }
    #home-index .item-box a::after {
          content:"";
          position: absolute;
          right: 4px;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 20px;
          height: 20px;
          background-image: url("../images/ico-arrow_02.png");
          background-repeat: no-repeat;
          background-size: contain;
      }

@media screen and (max-width:767px) {/*スマホ用指定*/

    #home-index .item-box { 
        font-size: clamp(14px, 1.6vw, 16px);
        font-weight: bold;
        }
        #home-index .item-box::after {
            width: 16px;
            height: 16px;
        }
}
@media screen and (min-width:768px) and (max-width:999px){/*スマホ・タブレット用指定*/

    #home-index .item-box { 
        font-size: clamp(16px, 1.8vw, 18px);
        font-weight: bold;
        }
        #home-index .item-box::after {
            width: 18px;
            height: 18px;
        }
}
@media print, screen and (min-width:1000px){/*PC用指定*/

    #home-index .item-box {
        font-size: clamp(20px, 2.2vw, 22px);
        font-weight: bold;
        }
        #home-index .item-box::after {
            width: 20px;
            height: 20px;
        }
}
/* indexboxのカラー設定 */
#home-index .item-01 { background: #c5c500; }
#home-index .item-02 { background: #92c533; }
#home-index .item-03 { background: #66c592; }
#home-index .item-04 { background: #92c566; }
#home-index .item-05 { background: #929200; }
#home-index .item-06 { background: #669200; }

/* リンク集 */
#home-index-box .lis-s1 {
    margin-bottom: 32px;
    }
    #home-index-box .lis-s1 img {
        width: 643px;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto 12px;
    }

/* home-information： -------------*/
#home-information-box .ttl-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 4px;
    }
    #home-information-box .grad-line {
        margin-bottom: 12px;
    }
    /* 見出し */
    #home-information-box .ttl-box .txt-s1 {
        color: #ff9100;
    }
    #home-information-box .lnk-s1 {
        background: #009191;
        color: #ffffff;
        border-radius: 4px;
    }

@media screen and (max-width:767px){/*スマホ用指定*/

    #home-information-box .ttl-box .txt-s1 {
        font-size: clamp(16px, 1.6vw, 16px);
    }
    #home-information-box .ttl-box .lnk-s1 {
        font-size: clamp(12px, 1.2vw, 12px);
        padding-left: 8px;
        padding-right: 8px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    #home-information-box .ttl-box .item-lef .txt-s1 {
        font-size: clamp(16px, 1.8vw, 18px);
    }
    #home-information-box .ttl-box .lnk-s1 {
        font-size: clamp(13px, 1.3vw, 13px);
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* information list */
@media screen and (max-width:767px){/*スマホ用指定*/

    #home-information-box {
        margin-bottom: 40px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    #home-information-box {
        margin-bottom: 100px;
    }
}
/* InformationのDetail */
#home-information-box .lis-s1 .hiduke {
    color: #009191;
    padding-right: 20px;
}
#home-information-box .lis-s1 .new {
    color: #ff9100;
    padding-right: 10px;
}
#home-information-box .lis-s1 p {
    min-width: 500px;
    display: inline-block;
}
#home-information-box .lis-s1 .lnk-detail {
    color: #009191;
    position: relative;
    }
    #home-information-box .lis-s1 .lnk-detail::after {
        content: '▼';
    }
    #home-information-box .lis-s1 .lnk-detail:hover {
        color: #ff9100;
    }

@media screen and (max-width:767px){/*スマホ用指定*/

    /* 内容Pを折り返す */
    #home-information-box .lis-s1 p {
        min-width: unset;
        word-break: break-all;
    }
    /* 詳細リンクを改行、右寄せに */
    #home-information-box .lis-s1 .lnk-detail {
        display: block;
        text-align: right;
        padding-top: 4px;
        padding-bottom: 4px;
        border-bottom: 1px dotted #009191;
        margin-bottom: 12px;
    }
}


/*//////////////////////////////////////////////////////// */
/* その他のページ共通（about,contact）  -------------*/
/*//////////////////////////////////////////////////////// */

/*--- ページタイトル ------------------------------*/
.etc-cat-page .page-ttl-box {
    color: #ff9100;
}
/* タイトル */
@media screen and (max-width:767px){/*スマホ用指定*/

    .etc-cat-page .page-ttl-box .ttl-s1 {
        font-size: clamp(14px, 1.4vw, 14px);
        margin-bottom: 10px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    .etc-cat-page .page-ttl-box .ttl-s1 {
        font-size: clamp(16px, 1.8vw, 18px);
        margin-bottom: 10px;
    }
}
/* レイアウト */
@media screen and (max-width:767px){/*スマホ用指定*/

    .etc-cat-page .content-box {
        margin-top: 16px;
        margin-bottom: 40px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    .etc-cat-page .content-box {
        margin-top: 16px;
        margin-bottom: 160px;
    }
}

/*//////////////////////////////////////////////////////// */
/* アクセス： access.html -------------*/
/*//////////////////////////////////////////////////////// */

/* レイアウト */
@media screen and (max-width:767px){/*スマホ用指定*/

    #access .item-box {
        margin-bottom: 16px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    #access .item-box {
        margin-bottom: 16px;
    }
}

/* 見出し */
#access .content-box .ttl-s2 {
    color: #009191;
    font-weight: 700;
    }
@media screen and (max-width:767px){/*スマホ用指定*/

    #access .content-box .ttl-s2 {
        font-size: clamp(14px, 1.4vw, 14px);
        margin-bottom: 4px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    #access .content-box .ttl-s2 {
        font-size: clamp(15px, 1.5vw, 15px);
        margin-bottom: 6px;
    }
}
/* テキスト */
@media screen and (max-width:767px){/*スマホ用指定*/

    #access .item-box .txt-s1 {
        font-size: clamp(14px, 1.4vw, 14px);
        margin-bottom: 4px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    #access .item-box .txt-s1 {
        font-size: clamp(15px, 1.5vw, 15px);
        margin-bottom: 6px;
    }
}
/* アクセス例 */
#access .item-box .access-ex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
#access .item-box .access-ex li {
    display; inline-block;
    border: 1px solid #009191;
    color: #009191;
    border-radius: 16px;
    padding: 2px 8px;
    width: calc(200px - 16px);
    text-align: center;
    margin-bottom: 16px;
    }
    #access .item-box .access-ex li span.st {
        position: relative;
        display: inline-block;
    }
    #access .item-box .access-ex li span.right {
        background: #009191;
        height: calc(tan(60deg) * 14px / 2);
        width: 12px;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        display: inline-block;
        margin-left: 6px;
        margin-right: 4px;
        margin-bottom: -2px;
    }
/* map */
#access .map {
    margin-bottom: 40px;
}
#access .map iframe {
    width: 650px;
    height: 300px;
    max-width: 100%;
}

/*//////////////////////////////////////////////////////// */
/* お問い合わせ： contact.html -------------*/
/*//////////////////////////////////////////////////////// */

#contact iframe {
    background: #f6f6f6;
}