@charset "utf-8";
/* ↓　全体設定　↓ */
:root{
    /* color */
    --base-color: #ffff94;
    --main-color: #4FBB53;
    --text-color: #3C3B3B;
    --text-sub-color: #4FBB53;
    /* value */
    --header-height: 80px;
}
html{
    font-size: 62.5%;
    width: 100%;
    overflow-x: hidden;
    scrollbar-color: var(--text-color) var(--main-color);
}
*{
    font-size: 1.6rem;
}
body{
    background: var(--base-color);
    color: var(--text-color);
    font-family: "Mochiy Pop P One", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: 1px;
    width: 100%;
    overflow-x: hidden;
}
a{
    color: var(--text-color);
    text-decoration: none;
}
h1{
    font-size: 3.2rem;
}
h2{
    font-size: 2.4rem;
}
.line_break{
    display: inline-block;
}
.hidden{
    display: none;
}
/* ↓↓　ヘッダーレイアウト　↓↓ */
.header{
    background: var(--main-color);
    width:100%;
    height: var(--header-height);
    position: fixed;
    bottom: 0;
    z-index: 50;
}
.header__nav_lists{
    list-style: none;
    display: grid;
    grid-template: 
    "order menu" var(--header-height)
    /5fr 1fr;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.header__nav_lists.active{
    background: var(--main-color);
    grid-template: 
    "flow flow" 60px
    "service service" 60px
    "example example" 60px
    "contact contact" 60px
    "order menu" var(--header-height)
    /5fr 1fr;
}
#nav_flow{
    grid-area: flow;
    display: none;
}
#nav_service{
    grid-area: service;
    display: none;
}
#nav_example{
    grid-area: example;
    display: none;
}
#nav_contact{
    grid-area: contact;
    display: none;
}
#nav_order{
    grid-area: order;
}
.header__nav_lists.active #nav_flow,
.header__nav_lists.active #nav_service,
.header__nav_lists.active #nav_example,
.header__nav_lists.active #nav_contact{
    display: block;
}
#nav_menu{
    grid-area: menu;
    display: block;
    text-align: end;
}
#nav_menu button{
    border: none;
    background: white;
    color: var(--main-color);
    font-size: 1.6rem;
    width: var(--header-height);
    height: var(--header-height);
}
#nav_menu button::before{
    content: "▲";
    display: block;
    font-size: 3.2rem;
}
#nav_menu button::after{
    content: "ひらく";
}
.header__nav_lists.active #nav_menu button::before{
    content: "▼";
}
.header__nav_lists.active #nav_menu button::after{
    content: "とじる";
}
.header__nav_lists li a{
    font-size: 2.4rem;
    color: white;
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: var(--header-height);
}
.header__nav_lists li a:hover{
    color: var(--base-color);
}
/* ↓↓↓　メインコンテンツレイアウト　↓↓↓ */
.main{
    margin-bottom: 5rem;
}
.main section{
    width: 90%;
    padding: 0 5%;
    margin: 0 auto;
}
.main section h2{
    padding: 10rem 0 2.4rem 0;
    -webkit-text-stroke: 1px var(--main-color);
    text-stroke: 1px var(--main-color);
    color: white;
}
/* ↓↓↓↓　トップ画面（index） ↓↓↓↓　*/
.hero{
    position: relative;
    border-bottom: none;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    height: 100%;
    width: auto;
}
.hero__h1{
    font-size: 2.4rem;
    padding-top: 10%;
}
.hero p{
    font-size: 1.6rem;
}
.hero__h1 span{
    font-size: 3.2rem;
}
.hero__news{
    background: white;
    position: static;
    line-height: 1.6;
    padding: 1.6rem;
    border-radius: 1rem;
    width: 90%;
    min-width: 100px;
}
.hero__news h2{
    font-size: 2rem;
    color: var(--text-color);
}
.note dt{
    font-size: 1.4rem;
    color: #ccc;
}
.note dd{
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero__portrait{
    display: block;
    position: static;
    margin: 5rem auto 0;
    width: 70%;
    max-height: none;
    aspect-ratio: 1 / 1;
}
/* ↓↓↓↓　ご依頼の流れ（index）　↓↓↓↓ */
.main section.flow{
    margin-bottom: 5rem;
}
.flow .heading{
    font-size: 2rem;
    margin-bottom: 2rem;
}
.flow__blocks h3{
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-sub-color);
}
.flow__blocks::after{
    content: "";
    background-image: url(./nigaoe/images/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 100%;
    height: 60px;
    margin: 1.6rem 0;
}
/* ↓↓↓↓　料金・内容（index）　↓↓↓↓ */
.service_wrap{
    background: var(--main-color);
    padding-bottom: 5.5rem;
}
.main .service h2{
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
    color: var(--main-color);
}
.service h3{
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
} 
.service h3 span{
    font-size: 1.6rem;
}
.service__text{
    color: white;
    margin-bottom: 3.6rem;
}
.service__plan{
    display: flex;
    flex-wrap: wrap;
    transform: translateX(-1.8rem);
    justify-content: center;
    margin-bottom: 2.4rem;
    width: 100vw;
}
.service__plan__fee{
    background: white;
    border-radius: 2.4rem;
    padding: 1.8rem;
    max-width: 400px;
}
.service__plan__fee:first-child{
    margin-bottom: 1.6rem;
}
.service__plan__fee p{
    text-align: right;
    width:300px;
    margin: 0 auto;
}
.service__plan__fee p.service__annotation{
    font-size: 1.6rem;
    text-align: center;
}
.service__plan__fee:nth-of-type(2){
    margin-left: 0;
}
.basic_fee{
    font-size: 2.4rem;
}
.service__fee{
    display: inline-block;
    width: 200px;
}
.service_contents{
    color: white;
    justify-items: center;
}
.service_content{
    background: white;
    border-radius: 1rem;
    width: 90%;
    color: var(--text-color);
    text-align: left;
    margin-bottom: 3.6rem;
    padding: 2.4rem;
}
.service_content ul{
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}
.service_content__text{
    display: block;
    margin-bottom: 1rem;
}
.redraw_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.redraw{
    background: white;
    border-radius: 1rem;
    color: var(--text-color);
    display: grid;
    grid-template:
    "title title title title title title" 1fr
    "text1 plus text2 equal total .." 3rem
    "kazu1 plus kazu2 equal total .." 3rem
    /10rem 3rem 10rem 3rem 5rem 1fr;
    width: 36rem;
    text-align: center;
    align-items: center;
    margin-bottom:0;
}
.redraw:first-child{
    margin-bottom: 1.6rem;
}
.redraw:last-child{
    margin-bottom: 0;
}
.title{
    grid-area: title;
    color: var(--text-sub-color);
    text-align: left;
    line-height: 1.6;
}
.text1{
    grid-area: text1;
}
.text2{
    grid-area: text2;
}
.kazu1{
    grid-area: kazu1;
}
.kazu2{
    grid-area: kazu2;
}
.plus{
    grid-area: plus;
}
.equal{
    grid-area: equal;
}
.total{
    grid-area: total;
}
.service__annotation{
    font-size: 1.6rem;
}
.service__images{
    display: block;
    text-align: center;
    margin: 1rem 0;
}
.service__images p{
    border: 4px solid var(--main-color);
    border-radius: 1rem;;
    padding: 1rem;
}
.service__images p:nth-child(2){
    border: none;
}
.change_color{
    color: var(--text-sub-color);
}
.service_content ul{
    width: 80%;
}
.service_content ul li{
    margin-bottom: 0.6rem;
}
/* ↓↓↓↓　作例紹介（index）　↓↓↓↓ */
.main section.example h2{
    text-align: center;
}
.example__group{
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
.example__group a{
    line-height: 0;
}
.example_img{
    width: 150px;
    border: 1rem solid white;
}
.example__btn{
    display: grid;
    background: white;
    color: var(--main-color);
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    line-height: 1;
    width: 30rem;
    height: 6rem;
    border-radius: 1rem;
    margin: 2.4rem auto 0;
}
.example__btn:hover{
    opacity: 0.8;
}
.example__annotation{
    font-size: 1.4rem;
    text-align: center;
    color: var(--text-sub-color);
}
/* ↓↓↓↓　公式ライン紹介（index）　↓↓↓↓ */
.contact_line{
    color: var(--main-color);
    text-align: center;
    background: white;
    border-radius: 2rem;
    width: 80%;
    max-width: 800px;
    margin: 20rem auto 0;
    padding: 2.4rem;
}
.contact_line__title{
    font-size: 1.8rem;
}
.contact_line__title::before{
    content: "-";
    margin-right: 1rem;
}
.contact_line__title::after{
    content: "-";
    margin-left: 1rem;
}
.contact_line__title+p{
    font-size: 1.4rem;
}
.line_btn{
    display: block;
    margin-top: 3rem;
}
.line_btn:hover{
    opacity: 0.8;
}
/* ↓↓↓↓　自己紹介（self-introduction）　↓↓↓↓ */
#self-introduction h1{
    text-align: center;
    margin: 3rem auto 1.6rem;
}
#self-introduction .flex{
    display: block;
    width: 90%;
    margin: 0 auto;
}
#self-introduction dt{
    font-size: 2.4rem;
}
#self-introduction dd{
    margin-bottom: 2.4rem;
}
.portrait{
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
}
/* ↓↓↓↓　利用規約（terms-of-use）　＆　プライバシーポリシー（privacy-policy）　↓↓↓↓ */
#terms_of_use main,
#privacy_policy main{
    font-size: 1.6rem;
    width: 90%;
    padding: 0 5%;
}
#terms_of_use h1,
#privacy_policy h1{
    text-align: center;
    padding-top: 10%;
    margin-bottom: 2.4rem;
}
#terms_of_use h2,
#privacy_policy h2{
    width: 100%;
    max-width: 460px;
    margin-bottom: 1rem;
    -webkit-text-stroke: 1px var(--main-color);
    text-stroke: 1px var(--text-color);
    color: white;
}
#terms_of_use .terms_of_use__block,
#privacy_policy .privacy_policy__block{
    margin-bottom: 5rem;
    list-style: none;
}
#terms_of_use .terms_of_use__block ol,
#privacy_policy .privacy_policy__block ol{
    /*transform: translateX(2.2rem);*/
    width: calc(100% - 2.5rem);
}

#terms_of_use .terms_of_use__block ol ul,
#privacy_policy .privacy_policy__block ol ul{
    transform: translateX(0);
}
/* ↓↓↓↓　お問い合わせ（contact）　↓↓↓↓ */
#contact h1{
    text-align: center;
    margin: 5rem auto 2.4rem
}
#contact form{
    background: white;
    border: 6px solid var(--main-color);
    border-radius: 1rem;
    padding: 1.6rem;
    transform: translateX(0);
    display: block;
    max-width: 616px;
    margin: 0 auto;
}
#contact form label{
    line-height: 1;
    font-size: 1.6rem;
}
#contact form input{
    display: block;
    border: 2px solid #ccc;
    border-radius: 0.6rem;
    font-size: 1.6rem;
    width: 100%;
    max-width: 400px;
    height: 100%;
    margin-bottom: 1.6rem;
}
#contact form textarea{
    border: 2px solid #ccc;
    border-radius: 0.6rem;
    width: 100%;
    max-width:500px;
    margin-bottom: 3rem;
}
#inquiry_input{
    min-height: 5em;
}
#form__submit_btn{
    display: block;
    width: 100%;
    min-width: 260px;
    max-width: 300px;
    height: 50px;
    border: none;
    border-radius: 0.6rem;
    background: var(--main-color);
    color: white;
    font-size: 1.6rem;
    margin: 0 auto;
}
/* ↓↓↓↓　特定商取引法に基づく表記（commercial-law）　↓↓↓↓ */
#commercial_law h1{
    display: block;
    margin: 5rem auto 3rem;
    text-align: center;
}
#commercial_law table{
    background: white;
    margin: 0 auto;
    border-collapse: collapse;
    border-radius: 0;
    font-size: 1.6rem;
    width: 90%;
}
#commercial_law th,
#commercial_law td{
    display: block;
    border-bottom: none;
    border-right: none;
    padding: 1rem 1.8rem;
}
#commercial_law tr:last-child th,
#commercial_law tr:last-child td{
    border-bottom: none;
}
#commercial_law th{
    background: var(--main-color);
    color: white;
    text-align: left;
    font-weight: 400;
}
#commercial_law td:last-child{
    border-right: none;
}
#commercial_law .inline_block{
    display: inline-block;
}
.sp_change_color{
    color: var(--text-sub-color);
}
/* ↓↓↓↓　似顔絵依頼フォーム（order-form）　↓↓↓↓ */
#order_form .main{
    width: 90%;
    padding: 0;
    margin: 0 auto;
}
#order_form form{
    margin-bottom: 10rem;
    font-size: 1.6rem;
}
#order_form .main section{
    padding: 0;
    margin-bottom: 3rem;
}
#order_form h1{
    display: block;
    margin: 5rem 0 2.4rem 3rem; 
}
#order_form h2{
    font-size: 2rem;
    margin-bottom: 1.2rem;
    padding: 0;
}
#order_form h3{
    color: var(--main-color);
    font-size: 1.8rem;
    font-weight: 400;
}
#order_form input{
    border: 2px solid #ccc;
    border-radius: 1rem;
    padding: 0.3rem 1rem;
    font-size: 1.6rem;
    overflow-x: scroll;
}
.form__input{
    background: white;
    border: 6px solid var(--main-color);
    border-radius: 2rem; 
    padding: 0;
    margin-bottom: 5rem; 
}
.form__input__items{
    line-height: 1.7;
}
.form__input__items.margin_bottom{
    margin-bottom: 2.4rem;
}
.sns_instagram,
.sns_line,
.mail{
    display: none;
}
#tool1:checked ~ .sns_instagram,
#tool2:checked ~ .sns_line,
#tool3:checked ~ .mail{
    display: block;
}
.sns_instagram input,
.sns_line input,
.mail input{
    box-sizing: border-box;
    width: 80%;
    max-width: 300px;
}
.form__check__textarea{
    font-family: "Mochiy Pop P One", sans-serif;
    height:auto;
}
.form__input__textarea{
    border: 2px solid #ccc;
    border-radius: 1rem;
    width: 100%;
    height: 10em;
    font-size: 1.6rem;
}
#unit_select{
    border: 2px solid #ccc;
    border-radius: 1rem;
    padding: 0.3rem;
}
#order_check{
    display: block;
    background: #ccc;
    border: none;
    border-radius: 1rem;
    color: white;
    font-size: 1.6rem;
    font-family: "Mochiy Pop P One", sans-serif;
    letter-spacing: 1px;
    padding: 1.5rem;
    margin: 0 auto;
}
#order_check.active{
    background: var(--main-color);
    cursor: pointer;
}
.purpose{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 600px;
}
.purpose label{
    margin-right: 2.4rem;
}
#order_form .confirm{
    margin-left: 0;
    margin-bottom: 5rem;
}
.confirm__permission{
    padding-bottom: 5rem;
    margin-bottom: 5rem;
    border-bottom: 2px solid white;
}
.confirm .emphasis{
    font-size: 1.6rem;
    margin-bottom: 3rem;
}
.confirm .emphasis .normal{
    font-size: 1.6rem;
}
.confirm iframe{
    border: 6px solid var(--main-color);
    width: 100%;
    height: 100rem;
}
.iframe__terms_of_use,
.iframe__privacy_policy{
    position: relative;
    display: none;
}
.iframe__terms_of_use::before,
.iframe__privacy_policy::before{
    content: "";
    display: block;
    background: transparent;
    width: 100%;
    height: var(--header-height);
    position: absolute;
    top: calc(101rem - var(--header-height));
    left: 3%;
}
.iframe__terms_of_use::after,
.iframe__privacy_policy::after{
    content: "";
    display: block;
    background: transparent;
    width: calc(50%);
    height: 101rem;
    position: absolute;
    top: 0;
    left: 0;
}
#check__terms_of_use:checked ~ .iframe__terms_of_use,
#check__privacy_policy:checked ~ .iframe__privacy_policy{
    display: block;
}
input[name="check"]{
    display: none;
}
#check__terms_of_use + label,
#check__privacy_policy + label{
    display: inline-block;
    background: var(--main-color);
    color: white;
    border-radius: 2rem 2rem 0 0;
    width: auto;
    height: auto;
    padding: 0 2.4rem;
    line-height: 50px;
    text-align: left;
    opacity: 0.6;
}
#check__terms_of_use:checked + label,
#check__privacy_policy:checked + label{
    opacity: 1;
}
.iframe__terms_of_use .checkbox,
.iframe__privacy_policy .checkbox{
    display: flex;
    justify-content: center;
}
.iframe__terms_of_use .checkbox #check__terms_of_use__select,
.iframe__privacy_policy .checkbox #check__privacy_policy__select{
    margin-right: 1rem;
}
.iframe__terms_of_use .checkbox label,
.iframe__privacy_policy .checkbox label{
    font-size: 2rem;
}

/* ↓↓　フッターレイアウト　↓↓ */
.footer{
    background: var(--main-color);
    color: white;
    padding-top: 5rem;
    margin-bottom: var(--header-height);
}
.footer_nav{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
}
.footer_nav li a{
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    color: var(--main-color);
    font-size: 1.6rem;
    width: 260px;
    height: 50px;
    background: white;
    border-radius: 1rem;
    margin:0 2rem 1.6rem 0;
}
.footer_nav li a::before{
    content: ">";
    position: absolute;
    top: 1.1rem;
    left: 1.2rem;
}
.footer_nav li a:hover{
    opacity: 0.8;
}
.footer small{
    display: block;
    text-align: center;
    font-size: 1.2rem;
}
/* ↓↓↓　注文フォーム（form）　↓↓↓ */
.footer__annotation{
    display: block;
    text-align: center;
    margin-bottom: 1.4rem;
}