/*
Theme Name: ANDSMILE
Author: ANDSMILE
Description: ANDSMILE
Version: 1.0
*/

/* 
基本設定
基準：1/22Pを基に作成
リンク：ポートフォリオ(リンク)追加
 */
@charset "UTF-8";

main{
    position: relative;
    z-index: -11;
}

/* 
(PC)：表示
(ul)：横並び
(ul)：上部余白あり
(ul)：はみ出したコンテンツを隠す
 */
.idx_top_list {
    padding-top: 23.2rem;
    display: flex;
    gap: 0;
    overflow: hidden;
}

/*
画像：１
(li)：高さ：指定
(li)：margin(上、左)
(li)：position(親)
 */
.idx_left_item {
    height: 68.7rem;
    margin: 3rem 0 0 -8rem;
    position: relative;
}

/* 
(ｐ)：前面配置
(ｐ)：position(子)
(ｐ)：改行させない
 */
.front_text_idx {
    /* position: absolute;
    bottom: 5%;
    left: 20%; */
    margin: -16rem 0 0 13rem;
    z-index: 100;
    font-weight: 500;
    font-size: 2.5rem;
    letter-spacing: 0.25rem;
    line-height: 1.6em;
    color: #FFFFFF;
    filter: drop-shadow(0 0.3rem 0.6rem #000000CC);
    white-space: nowrap;
}

/* 
画像：２
(li)：高さ：指定
(li)：キャッチフレーズ(中央)
 */
.idx_center_item {
    height: 69.3rem;
    padding: 0 1.26rem;
}

/* 
画像：３
(li)：高さ：指定
(li)：margin(右)
  */
.idx_right_item {
    height: 74.2rem;
    margin-right: -29rem;
}

/* 
(SP)：表示
(ul)：縦積み
(ul)：上部余白
(ul)：はみ出したコンテンツを隠す
 */
.sp_version_list {
    display: none;
}

/* ABOUT */

/* 
背景画像：オレンジ波
(section)：高さ：指定
(section)：margin(上、左)
(section)：position(親)
 */
.idx_about_section {
    background-image: url(img/orange_wave.png);
    margin: 9.6rem 0 0 -8rem;
    position: relative;
}

/* 共通 */
.idx_about_section,
.idx_support_bg {
    background-repeat: no-repeat;
    background-size: cover;
    height: 39.9rem;
}

/* 
(div)：英単語
(div)：position(子１)
 */
.about_idx {
    /* position: absolute;
    top: 22%;
    left: 17%; */
    z-index: 100;
}

.about_idx img,
.green_idx img {
    display: block;
}

.about_idx_img{
    width: 63rem;
    height: 17rem;
    padding: 9rem 0 0 23rem;
}

.support_idx_img{
    width: 63rem;
    height: 17rem;
    padding: 9rem 0 0 23rem;
}

.about_idx::after{
    content: '';
    background-image: url(./img/white_dotted_line.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 40rem;
    height: 0.816rem;
    margin: -0.35rem 0 0 23rem;
}

.green_idx::after{
    content: '';
    background-image: url(./img/white_dotted_line.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 40rem;
    height: 0.816rem;
    margin: -0.48rem 0 0 23rem;
}

/* 
(div)：テキスト
(div)：position(子２)
 */
.about_act_guideline {
    /* position: absolute;
    top: 58%;
    left: 13%; */
    margin: 5.8rem 0 0 18rem;
    z-index: 100;
}

.to_professional,
.support_bridge {
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.2rem;
    line-height: 1.5em;
    color: #333333;
}

.support_bridge {
    padding-top: 2.8rem;
    line-height: 1.54em;
}

/* SUPPORT */

/* 
背景画像：グリーン波
(div)：高さ：指定
(div)：margin(上、左)
(div)：position(親)
 */
.idx_support_bg {
    background-image: url(img/mountain_type.png);
    margin: 23.3rem 0 0 -8rem;
    position: relative;
}

/* 
(div)：英単語
(div)：position(子１)
 */
.green_idx {
    /* position: absolute;
    top: 22%;
    left: 17%; */
    z-index: 100;
}

/* 
(h2)：見出し
(div)：position(子２)
 */
.support_provision {
    /* position: absolute;
    top: 59%;
    left: 13%; */
    padding: 5.8rem 0 0 18rem;
    display: block;
    z-index: 100;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.2rem;
    line-height: 1.52em;
    color: #333333;
}

/* (br)：SP版のみ改行 */
.idx_sp_only {
    display: none;
}

/* 
(ul)：左右就労リスト
(ul)：上部余白あり
(ul)：サイズ指定あり
  */
.idx_employment_list {
    padding: 1.3rem 0 16.2rem;
    width: 118rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 2.8rem;
}

/* 
(li)：左右のアイテム
(li)：横幅指定
 */
.idx_employment_list li {
    width: 57.6rem;
}

/* 
(img)：左右の画像
(img)：高さ指定
*/
.cuisine_process_img,
.input_idx_img {
    height: 59rem;
}

/*
整理
実装内容：ホバー時の画像切り替え指定及びPC版とSP版で表示を制御する
要素分解：リンクa：PC版(ポートフォリオリンク)
要素分解：画像img１(プログラミングコードを記述中の様子)
要素分解：画像img２(薄いみかん&&初期設定のステート)
要素分解：画像img３(濃いみかん&&ホバーステート)
 */

/* img１(祖父) */
.input_idx_img {
    position: relative;
}

/* リンクa：PC版(父) */
.idx_link_pc {
    background-image: url(./img/portfolio_idx_pc.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 18.535rem;
    height: 17.456rem;
    position: relative;
    z-index: 999;
    transition: 1s;
    margin: -15.5rem 0 0 41.5rem;
}
.idx_link_pc:hover {
    background-image: url(./img/portfolio_idx_pc_hover.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 18.535rem;
    height: 17.456rem;
    transition: 1s;
}
/* img２，img３(長男、次男) */
.idx_link_pc img {
    /* position: absolute;
    bottom: 10.3rem;
    right: -11.7rem; */
    z-index: 1000;
    width: 18.5rem;
    height: 17.5rem;
    transition: 0.3s ease-out;
}

/* a,img：初期設定のステート */
.idx_link_pc .portfolio_idx_pc_hover {
    opacity: 0;
}

/* a,img： ホバー時に下の画像を非表示*/
.idx_link_pc:hover .portfolio_idx_pc {
    opacity: 0;
}

/* a：ホバー時に上の画像を表示 */
.idx_link_pc:hover .portfolio_idx_pc_hover {
    opacity: 1;
}

/* 
(p)：小見出し
(p)：フォントファミリー指定
 */
.feature {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: bold;
    font-size: 3rem;
    letter-spacing: 0.15rem;
    line-height: 1.5em;
    padding: 2.5rem 0 1.5rem;
    border-bottom: 0.1rem solid #333333;
    color: #98685F;
}

/* (p)右側：余白調整 */
.idx_working_right_item{
    position: relative;
}
.idx_working_right_item p {
    padding-left: 2.5rem;
    padding-top: 1.2rem;
}

.idx_working_right_item p:nth-child(1){
    padding-left: 2.5rem;
    padding-top: 0.5rem;
}

.contents_left_idx,
.contents_right_idx {
    padding-top: 1.2rem;
}

.add_contents_right_idx {
    padding-top: 2.1rem;
}

.contents_left_idx,
.contents_right_idx,
.add_contents_right_idx {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.786em;
    color: #333333;
}

/* リンクa：SP版 */
.index_link_sp {
    display: none;
}

/* b：680px */
@media screen and (max-width: 680px) {

    /* 
実装：表示方法を切り替える
PC版：表示、SP版：非表示
  */
    .idx_top_list {
        display: none;
    }

    /* 
(SP)：表示
(ul)：縦積み
(ul)：上部余白
(ul)：はみ出したコンテンツを隠す
 */
    .sp_version_list {
        display: block;
        padding-top: 6rem;
        overflow: hidden;
    }

    /* 
(li)：高さ：指定
(li)：margin(右)
(li)：position(親) 
*/
    .meal_item {
        height: 39.9rem;
        margin-right: -3rem;
        position: relative;
    }

    /*
(img)：position：(子) 
(img)：サイズ指定
*/
    .catch_phrase_sp {
        /* position: absolute;
        bottom: 10%;
        right: 15%; */
        display: block;
        position: relative;
        z-index: 999;
        width: 4.2rem;
        height: 32.5rem;
        margin: -37.5rem 0 0 30.5rem;
    }

    /*  
(li)：高さ：指定
(li)：position(親)
*/
    .pc_item_sp_version {
        height: 38.9rem;
        padding-top: 1rem;
        position: relative;
    }

    /*
(p)：position：(子) 
(p)：フォント指定
*/
    .sp_version_text {
        /* position: absolute;
        bottom: 11%;
        left: 8%; */
        display: block;
        margin: -10.5rem 0 0 3rem;
        z-index: 100;
        font-weight: 700;
        font-size: 1.5rem;
        letter-spacing: 0.15rem;
        line-height: 1.33em;
        color: #FFFFFF;
        filter: drop-shadow(0.3rem 0.3rem 0.5rem #00000080);
        white-space: nowrap;
    }

    /* ABOUT */

    /* 
背景画像：オレンジ波
(section)：高さ：指定
(section)：margin(上、左)
(section)：position(親)
*/
    .idx_about_section {
        height: 13.2rem;
        margin: 15.7rem 0 0 -5rem;
        position: relative;
    }

    /* 
(div)：英単語
(div)：position(子１)
*/

.about_idx {
    /* position: absolute;
    top: 22%;
    left: 17%; */
    z-index: 100;
}

.about_idx img,
.green_idx img {
    display: block;
}

.about_idx_img{
    width: 24rem;
    height: 6rem;
    padding: 3rem 0 0 9rem;
}

.support_idx_img{
    width: 24rem;
    height: 6rem;
    padding: 3rem 0 0 9rem;
}

.about_idx::after{
    content: '';
    background-image: url(./img/white_dotted_line_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 15rem;
    height: 0.329rem;
    margin: -0.05rem 0 0 9rem;
}

.green_idx::after{
    content: '';
    background-image: url(./img/white_dotted_line_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 15rem;
    height: 0.329rem;
    margin: -0.05rem 0 0 9rem;
}





    /* 
(div)：テキスト
(div)：position(子２)
*/
    .about_act_guideline {
        /* position: absolute;
        top: 60%;
        left: 19%; */
        margin: 1.8rem 0 0 8rem;
        z-index: 100;
    }

    .to_professional,
    .support_bridge {
        font-size: 1.2rem;
        letter-spacing: 0.06rem;
        line-height: 2.08em;
    }

    .support_bridge {
        padding-top: 2.7rem;
    }

    /* SUPPORT */

    /* 
背景画像：グリーン波
(div)：高さ：指定
(div)：margin(上、左)
(div)：position(親)
*/
    .idx_support_bg {
        height: 13.2rem;
        margin: 19.5rem 0 0 -5rem;
        position: relative;
    }

    /* 
(div)：英単語
(div)：position(子１)
*/
    .green_idx {
        /* position: absolute;
        top: 22%;
        left: 22%; */
        z-index: 100;
    }

    /* 
(h2)：見出し
(div)：position(子２)
*/
    .support_provision {
        /* position: absolute;
        top: 63%;
        left: 19%; */
        z-index: 1000;
        font-size: 1.2rem;
        letter-spacing: 0.06rem;
        line-height: 2.08em;
        height: 6.9rem;
        margin: 2rem 0 0 8rem;
        padding: 0 0 0 0;
    }

    /* (br)：SP版のみ改行 */
    .idx_sp_only {
        display: block;
    }

    /* 
(ul)：左右就労リスト
(ul)：上部余白あり
(ul)：サイズ指定あり
(ul)：縦積み
*/
    .idx_employment_list {
        padding: 2.5rem 0 15rem;
        width: 31.5rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 5.3rem;
    }

    /* 
(li)：左右のアイテム
(li)：横幅指定
*/
    .idx_employment_list li {
        width: 100%;
    }

    /* 
(img)：左右の画像
(img)：高さ指定
*/
    .cuisine_process_img,
    .input_idx_img {
        height: 32.3rem;
    }

    /* リンクa：PC版 */
    .idx_link_pc {
        display: none;
    }

    /* (p)：小見出し */
    .feature {
        font-size: 1.5rem;
        line-height: 1.4em;
        padding: 0.8rem 0 0 0;
    }

    /* 
PC版：非表示、SP版：表示(太く)
 */
    .sp_bold {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: bold;
        font-size: 1.2rem;
        line-height: 1.67em;
        color: #333333;
    }

    /* (p)右側：余白調整 */

    .idx_working_right_item p {
        padding-left: 0;
    }

    .contents_left_idx,
    .contents_right_idx {
        padding-top: 0.5rem;
    }

    .add_contents_right_idx {
        padding: 2.1rem 0 3rem;
    }

    .contents_left_idx,
    .contents_right_idx,
    .add_contents_right_idx {
        font-size: 1.2rem;
        line-height: 1.67em;
    }

    /*
    整理
    実装内容：ホバー時の画像切り替え指定及びPC版とSP版で表示を制御
    要素分解：リンクa：SP版(ポートフォリオリンク)
    要素分解：画像img１(ハッピーターン薄味&&初期設定のステート)
    要素分解：画像img２(ハッピーターン濃い味&&ホバーステート)
     */

    /* リンクa：SP版(親) */
    .index_link_sp {
        display: block;
        width: 100%;
        height: 7rem;
        position: relative;
        background-image: url(./img/portfolio_sp.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
    .index_link_sp:hover{
        background-image: url(./img/portfolio_hover.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    /* img１，img２(子) */
    .index_link_sp img {
        /* position: absolute;
        top: 0;
        left: 0; */
        transition: opacity 0.3s ease-out;
    }

    /* 初期設定のステート：濃い味 */
    .portfolio_hover_sp {
        opacity: 0;
    }

    /* 初期設定のステート：薄味 */
    .portfolio_idx_sp {
        opacity: 1;
    }

    /* ホバー中：濃い味 */
    .index_link_sp:hover .portfolio_hover_sp {
        opacity: 1;
    }

    /* ホバー中：薄味 */
    .index_link_sp:hover .portfolio_idx_sp {
        opacity: 0;
    }

}