@charset "utf-8"; /*文字コード*/
/*
=======================================
	model CSS
=======================================
*/
#main{
    overflow-x: hidden;
}
/*
=======================================
	model_course_select CSS
=======================================
*/
.model_course_title h3{
    margin-bottom: 5px;
    font-size: 1.2em;
}
.model_course_select{
    margin-bottom: 20px;
}
.model_course_title:hover{
    cursor:pointer;
}
.model_course{
    width: 100%;
    text-align: center;
}
.model_course h3{
    padding-top: 5px;
    margin: 0;
}
.model_course p{
    margin: 0;
}
.model_course_title{
    border-radius: 10px;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
#model_family_btn{
    background-color: #fbb743;
}
#model_couple_btn{
    background-color: #FF98AD;
}
#model_friend_btn{
    background-color: #91E2C4;
}

/* PC用設定（640px以上の場合） */
@media screen and (min-width:640px){
/* PC用CSSはこの下より記述してください */
    .model_course_select{
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }
    .model_course {
        position: relative;
        width: 31%;
    }
    /*この記述のおかげで〇がつくれる（padding-top:100%がheight代わり）*/
    .model_course::before {
        content:"";
        display: block;
        padding-top: 103%;
    }
    #model_family_btn{
        background-image: url("../images/model_botton_family.png");
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
    }
    #model_couple_btn{
        background-image: url("../images/model_botton_couple.png");
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
    }
    #model_friend_btn{
        background-image: url("../images/model_botton_friend.png");
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
    }
    .model_course_title {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-repeat:no-repeat;
        background-position:center;
        -moz-background-size:cover;
        background-size:cover;
        text-align: center;
        border-radius: 50%;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }
    .model_course h3::after {
        position: relative;
        content: "";
        display: inline-block;
        font-weight: 100;
        font-size: 1rem;
        padding-top: 48%;
    }
    .model_course_title:hover{
        cursor:pointer;
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
}

/* タブレット表示調整用（不要なら使わなくてOK）*/
/* タブレットの画面サイズでどうしても調整したい場合に利用してください（640～1023px）*/
@media screen and (min-width:640px) and (max-width:1023px) {
    /* タブレット用CSSはこの下より記述してください */
    .model_course h3{
    font-size: 0.9em;
    }
    .model_course p{
    font-size: 0.7em;
    }
}

/*
=======================================
	model_course_Contents CSS
=======================================
*/

.model_timeline_wrap{
    width: 100%;
    padding: 18px 15px;
    border-radius: 10px;
    margin-bottom: 30px;
}
.model_family_color_bg{
    background: #fcffd6;
}
.model_couple_color_bg{
    background-color: #ffedf0;
}
.model_friend_color_bg{
    background-color: #e2fff4;
}
.model_timeline_wrap h3{
    display: none;
}
.model_firstday{
    padding-top:10px;
    /* margin-bottom: 20px; */
    padding-bottom: 30px;
    border-bottom: 0.7px dotted #bababa;
}
.model_secondday{
    padding-top: 20px;
    padding-bottom: 30px;
    border-bottom: 0.7px dotted #bababa;
}
.model_thirdday{
    padding-top: 20px;
}
/* タイムラインの最終日下線打消し用 */
.model_day_adjustment{
    padding-bottom: 10px;
    border-bottom: none;
}
.model_link{
    color: #cc0e0e;
    border-bottom: 1px solid;
}
.model_link:hover{
    color: #cc0e0e;
}
.model_timeline_move{
    font-size: 0.8em;
}
.model_timeline_date {
    font-weight: bold;
    text-align: left;
    padding-right: 15px;
}
#model_family .model_timeline_date{
    background-color: #ffcb71;
    padding: 5px;
}
#model_couple .model_timeline_date{
    background-color: #febac8;
    padding: 5px;
}
#model_friend .model_timeline_date{
    background-color: #9ef7d6;
    padding: 5px;
}
.model_timeline .model_timeline_content{
    background-color: #fff;
    margin-bottom: 10px;
    padding: 10px;
}
/* .model_timeline > li::after{
    content: "↓";
    width: 100%;
    display: inline-block;
    padding: 5px 0;
} */
.model_timeline > li:last-child::after{
    content: "";
    padding: 0;
}
#model_family .model_family_img1,#model_family .model_family_img2{
    display: none;
}
#model_couple .model_couple_img1,#model_couple .model_couple_img2{
    display: none;
}
#model_friend .model_friend_img1,#model_friend .model_friend_img2,#model_friend .model_friend_img3,#model_friend .model_friend_img4{
    display: none;
}
/* PC用設定（640px以上の場合） */
@media screen and (min-width:640px){
    #model_family{
        position: relative;
    }
    #model_family .model_family_img1{
        display: inline-block;
        position: absolute;
        width: 21%;
        z-index: 1;
        top:19%;
        left: 49%;
        border: 5px solid #fff;
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
        -moz-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    #model_family .model_family_img2{
        display: inline-block;
        position: absolute;
        width: 30%;
        z-index: 1;
        top:15.5%;
        left: 66.5%;
        border: 5px solid #fff;
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
        -moz-transform: rotate(6deg);
        -webkit-transform: rotate(6deg);
        -o-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    #model_couple{
        position: relative;
    }
    #model_couple .model_couple_img1{
        display: inline-block;
        position: absolute;
        width: 18%;
        z-index: 1;
        top:4.5%;
        left: 60%;
        border: 5px solid #fff;
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
        -moz-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    #model_couple .model_couple_img2{
        display: inline-block;
        position: absolute;
        width: 21%;
        z-index: 1;
        top:1.3%;
        left: 75%;
        border: 5px solid #fff;
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
        -moz-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -o-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    #model_friend{
        position: relative;
    }
    #model_friend .model_friend_img1{
        display: inline-block;
        position: absolute;
        width: 27%;
        z-index: 1;
        top:11%;
        left: 64%;
        border: 5px solid #fff;
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
        -moz-transform: rotate(6deg);
        -webkit-transform: rotate(6deg);
        -o-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    #model_friend .model_friend_img2{
        display: inline-block;
        position: absolute;
        width: 30%;
        z-index: 1;
        top:30%;
        left: 65%;
        border: 5px solid #fff;
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
        -moz-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    #model_friend .model_friend_img3{
        display: inline-block;
        position: absolute;
        width: 20%;
        z-index: 1;
        top:33%;
        left: 53%;
        border: 5px solid #fff;
        box-shadow: 0 0 10px rgba(198, 198, 198, 0.8);
        -moz-transform: rotate(-7deg);
        -webkit-transform: rotate(-7deg);
        -o-transform: rotate(-7deg);
        -ms-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
   .model_timeline_wrap{
       padding: 30px;
   }
   .model_timeline_img{
       display: none;
   }
   .model_timeline_wrap h3{
       display: inline-block;
   }
   .model_timeline_wrap h3{
       position: relative;
       width: 108.5%;
       left: -42px;
       padding: 0.2em;
       color: white;
       text-align: center;
       font-size: 1.2em;
   }
   #model_family .model_timeline_date{
       background-color: transparent;
       padding-right: 15px;
       padding-left: 0;
       padding-top: 0;
       padding-bottom: 0;
   }
   #model_couple .model_timeline_date{
       background-color: transparent;
       padding-right: 15px;
       padding-left: 0;
       padding-top: 0;
       padding-bottom: 0;
   }
   #model_friend .model_timeline_date{
       background-color: transparent;
       padding-right: 15px;
       padding-left: 0;
       padding-top: 0;
       padding-bottom: 0;
   }
   .model_timeline .model_timeline_content{
       background-color: transparent;
       padding-left: 30px;
       padding-top:0;
       padding-bottom: 20px;
       margin-bottom: 0;
   }
   .model_family_color{
       background: #fbb743;
   }
   .model_couple_color{
       background-color: #FF98AD;
   }
   .model_friend_color{
       background-color: #91E2C4;
   }
   .model_timeline_wrap .model_family_color::before {
       position: absolute;
       content: '';
       top: 100%;
       left: 0;
       border: none;
       border-bottom: solid 5px transparent;
       border-right: solid 12px #e39227;
   }
   .model_timeline_wrap .model_couple_color::before {
       position: absolute;
       content: '';
       top: 100%;
       left: 0;
       border: none;
       border-bottom: solid 5px transparent;
       border-right: solid 12px #fc829b;
   }
   .model_timeline_wrap .model_friend_color::before {
       position: absolute;
       content: '';
       top: 100%;
       left: 0;
       border: none;
       border-bottom: solid 5px transparent;
       border-right: solid 12px #6ad2ac;
   }

   .model_timeline > li {
       overflow: hidden;
       margin: 0;
       position: relative;
       padding: 0 0 0 5px;
   }
   .model_timeline_date {
       width: 10%;
       float: left;
       text-align: right;
   }
   .model_timeline > li::after{
    display: none;
   }
   /*時間の入らないmodel_timeline-date調整用*/
   .model_timeline_date_0 {
       width: 10%;
       float: left;
       padding-top: 10px;
   }
   .model_timeline_content {
       width: 90%;
       float: left;
       border-left: 3px #e5e5d1 solid;
       padding-left: 30px;
       padding-bottom: 20px;
   }
   /* タイムラインの最終行程左線打消し用 */
   .model_timeline_content_adjustment{
       border-left: none;
   }
   .model_timeline_content:before {
       content: '';
       width: 12px;
       height: 12px;
       position: absolute;
       left: 10%;
       top: 0;
       border-radius: 100%;
   }
    .model_point_family:before{
       background: #fbb743;
   }
    .model_point_couple:before{
       background: #fc829b;
   }
    .model_point_friend:before{
       background: #91E2C4;
   }
   /* h5タグが入っている項目の〇の位置を調整するための設定 */
   .model_timeline-adjustment:before {
      top: 13px;
    }
   .model_pickup{
      position: relative;
      z-index: 0;
   }
   .model_pickup::before {
      overflow: visible;
      content: '';
      width: 100%;
      height: 110%;
      background: #fff;
      position: absolute;
      left: -10px;
      top: 0px;
      border-radius: 8px;
      z-index: -1;
    }
   .model_pickup p{
       padding-left:10px;
       padding-right: 13px;
        width: 97%;
    }
    /*文字位置調整用*/
   .model_timeline_adjustment{
      padding-top:9px!important;
   }
}

/* タブレット表示調整用（不要なら使わなくてOK）*/
/* タブレットの画面サイズでどうしても調整したい場合に利用してください（640～1023px）*/
@media screen and (min-width:640px) and (max-width:1023px) {
    /* タブレット用CSSはこの下より記述してください */
    .model_timeline_wrap h3{
        width: 110.5%;
        font-size: 1.2em;
    }
    .model_timeline_wrap h3::before {
        position: absolute;
        content: '';
        top: 100%;
        left: 0;
        border: none;
        border-bottom: solid 5px transparent;
        /* border-right: solid 12px rgb(227, 146, 39); */
    }

    #model_family .model_family_img1{
        top:20.5%;
    }

    #model_family .model_family_img2{
        top:17.5%;
    }

    #model_friend .model_friend_img1{
        top:11%;
        left:60%;
    }
    #model_friend .model_friend_img2{
        top:30.5%;
        left: 65%;
    }
    #model_friend .model_friend_img3{
        top:33%;
        left: 53%;
    }

}

/*
=======================================
	model_shopinfo CSS
=======================================
*/
.model_shopinfo_wrap{
    width: 100%;
    border-bottom: 1px solid #a8a8a8;
    font-size: 0.9rem;
}
.model_shopinfo{
    margin-bottom: 20px;
}
.model_shopinfo h3 {
    position: relative;
    background: #f4f4f4;
    padding: 5px 5px 5px 50px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
    margin-bottom: 20px;
}

#model_family .model_shopinfo h3:before {
    font-family: "Font Awesome 5 Free";
    content: "\f3c5";
    display: inline-block;
    line-height: 50px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #fbb743;
    font-weight: 600;
    width: 50px;
    text-align: center;
    height: 50px;
    left: -0.5em;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
#model_couple .model_shopinfo h3:before {
    font-family: "Font Awesome 5 Free";
    content: "\f3c5";
    display: inline-block;
    line-height: 50px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #fc829b;
    font-weight: 600;
    width: 50px;
    text-align: center;
    height: 50px;
    left: -0.5em;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
#model_friend .model_shopinfo h3:before {
    font-family: "Font Awesome 5 Free";
    content: "\f3c5";
    display: inline-block;
    line-height: 50px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #91E2C4;
    font-weight: 600;
    width: 50px;
    text-align: center;
    height: 50px;
    left: -0.5em;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
.model_shopinfo_article{
    padding-top: 20px;
}
.model_shopinfo h5{
    font-size: 1.1rem;
    margin: 0;
    padding: 0;
}
#model_family .model_shopinfo_article h5::before{
    content: "";
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    border-left: 5px solid #fbb743;
}
#model_couple .model_shopinfo_article h5::before{
    content: "";
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    border-left: 5px solid #fc829b;
}
#model_friend .model_shopinfo_article h5::before{
    content: "";
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    border-left: 5px solid #91E2C4;
}
.model_shopinfo_img{
    width: 100%;
    padding-top: 15px;
    padding-bottom: 10px;
}
.model_shopinfo_text{
    margin-bottom: 10px;
}
.model_shopinfo_list{
    font-size:0.75rem;
    border: 1px solid #a8a8a8;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
}
.model_shopinfo_list dt{
    float:left;
    clear:left;
}
.model_shopinfo_list dd{
    float:left;
}
.model_shopinfo_contents .model_shopinfo_wrap:last-child{
        border-bottom: none;
        margin-bottom: 30px;
}
/* PC用設定（640px以上の場合） */
@media screen and (min-width:640px){
    .model_shopinfo_contents{
        display: flex;
        		flex-wrap: wrap;
        justify-content:space-between;
    }
    .model_shopinfo_wrap{
        width: 48%;
        border-bottom: none;
    }
    .model_shopinfo_article{
        margin-bottom: 10px;
    }
    .model_shopinfo h5{
        margin-bottom: 10px;
    }
    .model_shopinfo_img{
        margin-right:10px;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 5px;
        width: 48%;
        float:left;
    }
    .model_shopinfo_text{
        margin-bottom: 10px;
    }
}

/*フェードイン設定*/
.fade-in {
  transition: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -webkit-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
}