@charset "utf-8";

/* sp View   ～768px  ----------------------------------------------------------------------------------------------*/

section:nth-of-type(n){
    all: initial;
}
section::before,
section::after{
    all: initial;
    content: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* --- スマホ用（共通設定：縦並び） --- */
.program_element {
  display: grid;
  grid-template-areas:
    "title"
    "image"
    "text";
  gap: 6px;
  margin-bottom: 50px;
}

.program_title { grid-area: title; }
.program_image { grid-area: image; }
.program_text  { grid-area: text; }



#program .program_element{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2em;
}
#program .program_element div{
    margin-bottom: 6px;
}
#program .program_element .program_title{
    font-size: 28px;
    background: url("../../img/about/title_flame1.png") no-repeat left top , url("../../img/about/title_flame2.png") no-repeat right top;
    padding: 18px 36px 0
}
#program .program_element .program_img{
    width: 320px;
    /*height: auto;
    border-radius: 16px;*/
}
#program .program_element .program_text{
    text-align: left;
    width: 320px;
    background-color: #FFF06E;
    border-radius: 20px;
    padding: 1em;
    align-self: center;
}
/*--- Tablet View ---------------------------------------------------------------------------------------------------------*/
@media (min-width: 768px){
    
    main{
        padding-top: 60px;
    }
    /* --- PC用（横並び・順序入れ替え） --- */
    .program_element {
        display: grid !important;
        /*grid-template-columns: repeat(3, 1fr);*/
        grid-template-columns: auto auto auto;
        align-items: center;
    }


    /* 奇数行: 説明文(1) タイトル(2) 画像(3) */
    .program_element:nth-of-type(odd) {
        grid-template-areas: "text title image";
    }
    #program .program_element:nth-of-type(odd) .program_title {
        background: url("../../img/about/title_flame1.png") no-repeat left top , url("../../img/about/title_flame3.png") no-repeat left bottom;
        padding: 35px 00px 35px 20px;
    }

    /* 偶数行: 画像(1) タイトル(2) 説明文(3) */
    .program_element:nth-of-type(even) {
        grid-template-areas: "image title text";
    }
    #program .program_element:nth-of-type(even) .program_title {
        background: url("../../img/about/title_flame2.png") no-repeat right top , url("../../img/about/title_flame4.png") no-repeat right bottom;
        padding: 35px 20px 35px 0px;
    }

    .program_title {
        grid-area: title;
        /* 縦書きにする設定 */
        writing-mode: vertical-rl;

        /* 中央揃えにしたい場合 */
        justify-self: center; /* Grid内の左右中央 */
        align-self: center;   /* Grid内の上下中央 */

        /* 必要に応じてフォント調整 */
        text-orientation: upright; /* 英数字も横に倒さず直立させる設定 */
    }
    #program .program_element .program_img {
        max-width: 480px;
        width: auto;
    }
    #program .program_element .program_text{
        width: auto;
        max-width: 640px;
        border-radius: 100px;
        padding: 1em 3em;
    }
}

/*--- Desktop View ---------------------------------------------------------------------------------------------------------*/
@media (min-width: 1024px){
}