@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%;
    scrollbar-color: var(--base-color) var(--main-color);
    scrollbar-width: 3%;
}
*{
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
}
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;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;/*Chrome,Safari*/
    -ms-text-size-adjust: 100%;/*EgdeMobile*/
    -moz-text-size-adjust: 100%;/*firefox*/
}
a{
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
}
h1{
    font-size: 4.8rem;
}
h2{
    font-size: 3.2rem;
}
/* ↓↓　ヘッダーレイアウト　↓↓ */
.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-columns: repeat(5, 1fr);
    height: var(--header-height);
    */
    grid-template: 
    "flow service example contact order" var(--header-height)
    /1fr 1fr 1fr 1fr 1fr;
}
#nav_flow{
    grid-area: flow;
}
#nav_service{
    grid-area: service;
}
#nav_example{
    grid-area: example;
}
#nav_contact{
    grid-area: contact;
}
#nav_order{
    grid-area: order;
}
#nav_menu{
    grid-area: menu;
    display: none;
}
.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{
    max-width: 1280px;
    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: 6px  solid var(--text-color);
    text-align: left;
    padding-left: 5%;
    height: calc(100vh - var(--header-height));
    width: auto;
}
.hero__h1{
    font-size: 4.8rem;
    padding-top: 5%;
}
.hero p{
    font-size: 2.4rem;
}
.hero__h1 span{
    font-size: 6.8rem;
}
.hero__news{
    background: white;
    position: absolute;
    bottom: 10%;
    line-height: 1.6;
    padding: 2.4rem;
    border-radius: 1rem;
    width: 40%;
    min-width: 500px;
}
.hero__news h2{
    font-size: 2.4rem; 
    color: var(--text-color);
}
.hero__news .text{
    display: block;
    font-size: 1.4rem;
    position: relative;
    transform: translateX(1.6rem);
    width:90%;
}
.hero__news .text::before{
    content:"※";
    position: absolute;
    top: 0;
    left: -1.6rem;
}
.hero__news .text .line_break{
    font-size: 1.4rem;
}
.note{
    margin-bottom: 1rem;
}
.note:last-child{
    margin-bottom: 0;
}
.note dt{
    font-size: 1.6rem;
    color: #ccc;
}
.note dd{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.note:hover dt,
.note:hover dd{
    color: var(--text-sub-color);
}
.hero__portrait{
    position: absolute;
    bottom: 0;
    right: 3%;
    width: 40%;
}
/* ↓↓↓↓　ご依頼の流れ（index）　↓↓↓↓ */
.main section.flow{
    margin-bottom: 5rem;
}
.flow .heading{
    display: block;
    font-size: 2.4rem;
    margin-bottom: 2.4rem;
}
.flow__blocks h3{
    font-size: 2.4rem;
    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: 100px;
    height: 60px;
    margin: 1.6rem 0;
}
.flow__blocks:last-of-type::after{
    display: none;
}
.flow__blocks_links{
    display: block;
}
.flow__annotation{
    display: block;
    font-size: 1.4rem;
}
/* ↓↓↓↓　料金・内容（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: 2.4rem;
    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;
    transform: translateX(-1.8rem);
    justify-content: space-around;
    margin-bottom: 2.4rem;
}
.service__plan__fee{
    background: white;
    border-radius: 2.4rem;
    padding: 1.8rem;
    max-width: 400px;
}
.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: 1.2rem;
}
.basic_fee{
    font-size: 3.2rem;
}
.service__fee{
    display: inline-block;
    width: 200px;
}
.service_contents{
    color: white;
    justify-items: center;
}
.service_content{
    background: white;
    border-radius: 1rem;
    width: 100%;
    color: var(--text-color);
    text-align: center;
    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" 6rem
    "text1 plus text2 equal total .." 3rem
    "kazu1 plus kazu2 equal total .." 3rem
    /10rem 3rem 10rem 3rem 5rem 15rem;
    width: 36rem;
    text-align: center;
    align-items: center;
    margin-bottom:1rem;
}
.redraw:last-child{
    margin-bottom: 3.6rem;
}
.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: flex;
    flex-wrap: wrap;
    justify-content: 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);
}
/* ↓↓↓↓　作例紹介（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: 300px;
    border: 1rem solid white;
}
.example__btn{
    display: grid;
    background: white;
    color: var(--main-color);
    font-size: 2.4rem;
    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.6rem;
    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: 3.2rem;
}
.contact_line__title::before{
    content: "-";
    margin-right: 2.8rem;
}
.contact_line__title::after{
    content: "-";
    margin-left: 2.8rem;
}
.line_btn{
    display: block;
    margin-top: 3rem;
}
.line_btn:hover{
    opacity: 0.8;
}
/* ↓↓↓↓　自己紹介（self-introduction）　↓↓↓↓ */
#self-introduction h1{
    text-align: center;
}
#self-introduction .flex{
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    justify-content: space-around;
}
#self-introduction dt{
    font-size: 2.4rem;
}
#self-introduction dd{
    margin-bottom: 2.4rem;
}
.portrait{
    background: white;
    border-radius: 100%;
    width: 40%;
    max-width: 400px;
}
/* ↓↓↓↓　利用規約（terms-of-use）　＆　プライバシーポリシー（privacy-policy）　↓↓↓↓ */
#terms_of_use main,
#privacy_policy main{
    font-size: 1.6rem;
    max-width: 1280px;
    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: 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);
}

#terms_of_use .terms_of_use__block ol ul,
#privacy_policy .privacy_policy__block ol ul{
    transform: translateX(2.6rem);
}
/* ↓↓↓↓　お問い合わせ（contact）　↓↓↓↓ */
#contact h1{
    text-align: center;
    margin: 5rem auto 2.4rem
}
#contact form{
    background: white;
    border: 6px solid var(--main-color);
    border-radius: 2rem;
    padding: 3rem;
    transform: translateX(-3.2rem);
    display: grid;
    grid-template:
    "name name-input" 2.4rem
    ".... ...." 2.4rem
    "hira hira-input" 2.4rem
    ".... ...." 2.4rem
    "mail mail-input" 2.4rem
    ".... ...." 2.4rem
    "inquiry ...." 2.4rem
    ".... ...." 1rem
    "inquiry-input inquiry-input" 10rem
    ".... ...." 3.6rem
    "submit submit" 5rem
    / 216px 400px;
    justify-content: center;
    align-items: center;
    max-width: 616px;
    margin: 0 auto;
}
#contact form label{
    line-height: 1;
    font-size: 2rem;
}
#contact form input{
    border: 2px solid #ccc;
    border-radius: 0.6rem;
    font-size: 1.6rem;
    height: 100%;
}
#contact form textarea{
    border: 2px solid #ccc;
    border-radius: 0.6rem;
    height: 100%;
}
#name{
    grid-area: name;
}
#name_input{
    grid-area: name-input;
}
#hiragana{
    grid-area: hira;
}
#hiragana_input{
    grid-area: hira-input;
}
#email{
    grid-area: mail;
}
#email_input{
    grid-area: mail-input;
}
#inquiry{
    grid-area: inquiry;
}
#inquiry_input{
    grid-area: inquiry-input;
}
#form__submit_btn{
    grid-area: submit;
    width: 300px;
    height: 50px;
    border: none;
    border-radius: 0.6rem;
    background: var(--main-color);
    color: white;
    font-size: 2rem;
    margin: 0 auto;
    cursor: pointer;
}
#contact form.contact__check input,
#contact form.contact__check textarea{
    border: none;
}
.thanks{
    width: 100%;
    height: 60vh;
}
/* ↓↓↓↓　特定商取引法に基づく表記（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: 1rem;
}
#commercial_law th,
#commercial_law td{
    border-bottom: 2px solid #ccc;
    border-right: 2px dashed #ccc;
    padding: 1rem 1.8rem;
}
#commercial_law tr:last-child th,
#commercial_law tr:last-child td{
    border-bottom: none;
}
#commercial_law th{
    text-align: right;
    font-weight: 400;
}
#commercial_law td:last-child{
    border-right: none;
}
/* ↓↓↓↓　似顔絵依頼フォーム（order-form）　↓↓↓↓ */
#order_form .main{
    max-width: 1280px;
    padding: 0 5%;
    margin: 0 auto;
}
#order_form form{
    margin-bottom: 10rem;
}
#order_form .main section{
    padding: 0;
    margin-bottom: 3rem;
}
#order_form h1{
    display: block;
    margin: 5rem 0 2.4rem 3rem;
}
#order_form h2{
    margin-bottom: 1.2rem;
    padding: 0;
}
#order_form h3{
    color: var(--main-color);
    font-size: 2.4rem;
    font-weight: 400;
}
#order_form .required::after{
    content: "必須";
    display: inline-block;
    border: 2px solid var(--main-color);
    border-radius: 1rem; 
    font-size: 1.6rem;
    font-weight: 300;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    color: var(--text-sub-color);
    margin-left: 1.8rem;
    padding: 0.5rem 1rem;
    line-height: 1;
}
#order_form input{
    font-family: "Mochiy Pop P One", sans-serif;
    border: 2px solid #ccc;
    border-radius: 1rem;
    padding: 0.3rem 1rem;
    width: auto;
    cursor: pointer;
}
#order_form label{
    cursor: pointer;
}
#order_form .check input{
    border-radius: 0;
    padding: 0.3rem 0;
}
.form__check__textarea{
    font-family: "Mochiy Pop P One", sans-serif;
    height:auto;
}
.form__input{
    background: white;
    border: 6px solid var(--main-color);
    border-radius: 2rem; 
    padding: 2.4rem;
    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;
}
.mail input{
    width: 400px;
}
.form__input__textarea{
    font-family: "Mochiy Pop P One", sans-serif;
    font-weight: 300;
    border: 2px solid #ccc;
    border-radius: 1rem;
    width: 80%;
    height: 10em;
}
#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: 2rem;
    font-family: "Mochiy Pop P One", sans-serif;
    letter-spacing: 1px;
    padding: 1.5rem;
    margin: 0 auto;
    cursor: pointer;
}
#order_check.active{
    background: var(--main-color);
    cursor: pointer;
}
#order_submit{
    display: block;
    background: var(--main-color);
    border: none;
    border-radius: 1rem;
    color: white;
    font-size: 2rem;
    font-family: "Mochiy Pop P One", sans-serif;
    letter-spacing: 1px;
    padding: 1.5rem;
    margin: 0 auto;
    width: 200px;
}
.purpose{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    max-width: 600px;
}
.purpose label{
    margin-right: 2.4rem;
}
#order_form .confirm{
    margin-left: 3rem;
    margin-bottom: 5rem;
}
.confirm__permission{
    padding-bottom: 5rem;
    margin-bottom: 5rem;
    border-bottom: 2px solid white;
}
#permission{
    display: none;
}
#permission + label{
    color: white;
    display: grid;
    justify-content: center;
    align-items: center;
    background: #ccc;
    border-radius: 1rem;
    width: 200px;
    height: 50px;
    cursor: pointer;
}
#permission:checked + label{
    background: var(--main-color);
}
.confirm .emphasis{
    font-size: 2rem;
    margin-bottom: 3rem;
}
.confirm .emphasis .normal{
    font-size: 1.8rem;
}
.iframe__terms_of_use,
.iframe__privacy_policy{
    position: relative;
    display: none;
}
.confirm iframe{
    border: 6px solid var(--main-color);
    width: 100%;
    height: 100rem;
    vertical-align: bottom;
}
.iframe__terms_of_use::after,
.iframe__privacy_policy::after{
    content: "";
    display: block;
    background: transparent;
    width: calc(100% - 10px);
    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;
    height: 50px;
    padding: 0 2.4rem;
    line-height: 50px;
    text-align: center;
    opacity: 0.8;
}
#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;
    align-items: center;
    border:6px solid var(--main-color);
    width: 100%;
    height: 5rem;
}
.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;
}
#order_form .check input,
#order_form .check textarea{
    width: 100%;
    border: none;
}
#order_form input[name="illust_size1"],
#order_form input[name="illust_size2"]{
    width: 6em;
    text-align: center;
}
#order_form input[name="number_of_people"],
#order_form input[name="unit"]{
    width: 2em;
    text-align: center;
}
#check__terms_of_use__select,
#check__privacy_policy__select{
    display: block;
}

/* ↓↓　フッターレイアウト　↓↓ */
.footer{
    background: var(--main-color);
    color: white;
    padding-top: 5rem;
    padding-bottom: 3rem;
    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;
}