@charset "UTF-8"; /* * CSS pageParts.css */ /* --------------------------------------- #index --------------------------------------- */ /* common */ #index a.btnlink{ min-width: 172px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #index .sectitle{ margin-bottom: 10px; max-width: 100%; width: 100%; font-size: 1.69em; } #index .insec{ width: 100%; max-width: 100%; } #index #sec_2 .section, #index #sec_3 .section{ max-width: 1220px; margin-left: auto; margin-right: auto; width: calc(100% - 40px) } @media screen and (max-width: 767px) { #index .sectitle{ margin-bottom: 5px; font-size: 1.6em; } #index #sec_2 .section, #index #sec_3 .section{ padding-left: 0; padding-right: 0; width: 100%; } } /* sec_1 */ #index #sec_1{ padding-top: 60px; padding-bottom: 70px; } #index #sec_1 .txtbox1{ text-align: center; font-weight: bold; font-size: 1.13em; } #index #sec_1 .txtbox1>p{ font-weight: bold; } #index #sec_1 .txtbox1>p:first-child{ margin-bottom: 30px; } #index #sec_1 .txtbox1>p, #index #sec_1 .link1{ text-align: center; } #index #sec_1 .link1{ margin-top: 30px; } @media screen and (max-width: 767px) { #index #sec_1{ padding-top: 25px; padding-bottom: 35px; } #index #sec_1 .section{ margin-left: 6%; margin-right: 6%; } #index #sec_1 .txtbox1{ font-size: 1em; text-align: left; } #index #sec_1 .txtbox1>p, #index #sec_1 .link1{ text-align: left; } #index #sec_1 .link1{ margin-top: 20px; text-align: center; } } /* sec_2 */ #index #sec_2{ background-color: #f5f5f5; padding-top: 55px; padding-bottom: 60px; margin-top: 0; } #index #sec_2 .section{ padding-left: 20px; padding-right: 20px; } #index #sec_2 .sectitle{ margin-left: auto; margin-right: auto; padding-left: 20px;padding-right: 20px; } #index #sec_2 .title1{ margin-left: auto; margin-right: auto; padding-left: 20px;padding-right: 20px; width: calc(100% - 40px) } #index #sec_2 .title1{ font-size: 1.13em; margin-bottom: 20px; } #index #sec_2 #s2_insec2{ margin-top: 30px; } #index #sec_2 #s2_insec2 .link1{ text-align: center; margin-top: 30px; } #index #sec_2 .newslist>ul>li>a .txtbox{ background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } @media screen and (max-width: 767px) { #index #sec_2{ padding: 0; background-color: transparent; } #index #sec_2 .section{ padding-left: 0; padding-right: 0; } #index #sec_2 .sectitle, #index #sec_2 .title1{ padding-left: 0; padding-right: 0; width: 100%; } #index #sec_2 .title1{ font-size: 1em; margin-bottom: 10px; } #index #s2_insec1{ background-color: #f5f5f5; padding-top: 30px; padding-bottom: 40px; padding-left: 6%; padding-right: 6%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #index #s2_insec2{ padding-left: 6%; padding-right: 6%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #index #sec_2 .newslist.shop>ul>li>a .txtbox{ background-color: #f5f5f5; } #index #sec_2 .newslist>ul>li>a .img1, #index #sec_2 .newslist>ul>li:nth-child(n+3){ display: none; } } /* sec_3 */ #index #sec_3{ padding-top: 65px; } #index #sec_3 .sectitle{ margin-bottom: 25px; } #index #sec_3 .link1{ margin-top: 60px; text-align: center; } @media screen and (max-width: 767px) { #index #sec_3{ padding-top: 75px; } #index #sec_3 .sectitle, #index #sec_3 .shopguidebox .title, #index #sec_3 .shopguidebox .mapbox .shoplist{ margin-left: 6%; margin-right: 6%; } #index #sec_3 .link1{ margin-top: 35px; } } /* --------------------------------------- #shopguide --------------------------------------- */ @media screen and (max-width: 767px) { #shopguide #sec_1.incnt{ max-width: 100%; width: 100%; } #shopguide #sec_1 .shopguidebox .title, #shopguide #sec_1 .shopguidebox .mapbox .shoplist{ margin-left: 6%; margin-right: 6%; } } /* --------------------------------------- #concept --------------------------------------- */ #concept #sec_1 .img1{ margin-top: 30px; } #concept #sec_2 .box1{ background: #f5f5f5; padding: 50px 6%; text-align: center; margin-bottom: 30px; } #concept #sec_2 .box1>ul{ display: inline-block; padding-left: 5px; width: 460px; } #concept #sec_2 .box1>ul dl{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; font-feature-settings : "palt"; -ms-align-items: center; align-items: center; } #concept #sec_2 .box1 dl>dt{ font-size: 1.2em; text-align: right; width: 220px; } #concept #sec_2 .box1 dl>dd{ width: calc(100% - 240px); font-family: "游明朝", YuMincho, "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif; font-size: 1.8em; text-align: left; } #concept #sec_2 .box1 dl>dd>span{ background: #e5384c; color: #fff; width: 40px; height: 40px; line-height: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e5384c; display: inline-block; text-align: center; border-radius: 50%; margin-right: 5px; } @media screen and (max-width: 767px) { #concept #sec_1 .img1{ margin-top: 15px; } #concept #sec_2 .box1{ padding: 30px 6%; margin-bottom: 15px; } #concept #sec_2 .box1>ul{ padding-left: 0; width: 100%; max-width: 280px; } #concept #sec_2 .box1 dl>dt{ font-size: 0.8em; width: 130px; } #concept #sec_2 .box1 dl>dd{ width: calc(100% - 145px); font-size: 1.2em; } #concept #sec_2 .box1 dl>dd>span{ width: 26px; height: 26px; line-height: 26px; } } /* --------------------------------------- #access --------------------------------------- */ /* sec_1 */ #access #sec_1 .box1{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; -ms-align-items: center; align-items: center; margin-bottom: 35px; } #access #sec_1 .box1 .txt1{ width: calc(100% - 240px) } #access #sec_1 .box1 .link1{ width: 240px; } #access #sec_1 .box1 .link1>a{ width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px 20px; } #access #sec_1 .accessmap{ width: 100%; height: 626px; overflow: hidden; } #access #sec_1 .accessmap iframe{ width: 100%; height: 1252px; border: none; margin-top: -313px; } @media screen and (max-width: 767px) { #access #sec_1 .box1{ display: block; } #access #sec_1 .box1 .txt1{ width: 100%; margin-bottom: 20px; } #access #sec_1 .box1 .link1{ width: 100%; text-align: center; } #access #sec_1 .box1 .link1>a{ max-width: 240px; } #access #sec_1 .accessmap{ height: 270px; } #access #sec_1 .accessmap iframe{ height: 540px; margin-top: -135px; } } /* sec_2 */ #access #sec_2 .box1>ul>li{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; margin-bottom: 10px; } #access #sec_2 .box1>ul>li:last-child{ margin-bottom: 0; } #access #sec_2 .box1>ul>li .txt1{ background: #f5f5f5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 34px 55px; width: calc(100% - 295px); font-size: 1.13em; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; } #access #sec_2 .box1>ul>li .txt1 .txt2, #access #sec_2 .box1>ul>li .txt1 .txt3{ font-size: 0.78em; padding-left: 1em; text-indent: -1em; } #access #sec_2 .box1>ul>li .txt1 .txt2{ margin-top: 5px; } #access #sec_2 .box1>ul>li .link1{ width: 295px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #access #sec_2 .box1>ul>li ul.link1>li{ height: 50%; width: 100%; border-bottom: 1px solid #fff; } #access #sec_2 .box1>ul>li ul.link1>li:last-child{ border-bottom: none; } #access #sec_2 .box1>ul>li .link1 a{ width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px 20px; height: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; font-size: 1em; } #access #sec_2 .box1>ul>li .link1 a:after{ content: ""; width: 7px; height: 7px; border: 1px solid; border-color: #fff #fff transparent transparent; transform: rotate(45deg); display: inline-block; font-feature-settings: "palt"; } @media screen and (max-width: 767px) { #access #sec_2 .box1>ul>li{ display: block; margin-bottom: 20px; } #access #sec_2 .box1>ul>li .txt1{ width: 100%; font-size: 1em; padding: 15px 20px; text-align: center; display: block; background-color: #001a37; color: #fff; } #access #sec_2 .box1>ul>li .txt1 .txt2{ text-align: left; margin-top: 0; } #access #sec_2 .box1>ul>li .txt1 .txt3{text-align: left; } #access #sec_2 .box1>ul>li .link1{ width: 100%; display: block; border: 1px solid #001a37; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #access #sec_2 .box1>ul>li ul.link1>li{ height: auto; border-bottom: 1px solid #001a37; } #access #sec_2 .box1>ul>li ul.link1>li:last-child{ border-bottom: none; } #access #sec_2 .box1>ul>li .link1 a.btnlink { background: #fff; color: #001a37; border: none; } #access #sec_2 .box1>ul>li .link1 a.btnlink:hover { background: #001a37 !important; color: #fff; } #access #sec_2 .box1>ul>li .link1 a.btnlink:after{ border: 1px solid; border-color: #001a37 #001a37 transparent transparent; } #access #sec_2 .box1>ul>li .link1 a.btnlink:hover:after{ border: 1px solid; border-color: #fff #fff transparent transparent; } #access #sec_2 .box1>ul>li .txt1 .txt2, #access #sec_2 .box1>ul>li .txt1 .txt3{ font-size: 0.87em; } } /* sec_3 */ #access #sec_3 .title1{ font-size: 1.25em; margin-bottom: 15px; padding-left: 35px; position: relative; line-height: 1.6; } #access #sec_3 .title1 .icon{ position: absolute; top: 0; bottom: 0; left: 0; margin-top: auto; margin-bottom: auto; } #access #sec_3 .title1:nth-child(1) .icon{ width: 26px; height: 26px; } #access #sec_3 .list1>ul>li{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; margin-bottom: 35px; } #access #sec_3 .list1>ul>li:last-child{ margin-bottom: 0; } #access #sec_3 .list1>ul>li .img2{ width: 460px; } #access #sec_3 .list1>ul>li .txtbox1{ width: calc(100% - 510px) } #access #sec_3 .list1>ul>li .txtbox1 .title2{ font-size: 1.25em; margin-bottom: 10px; } #access #sec_3 .list1>ul>li .txtbox1 .txt1{ padding-left: 5em!important; text-indent: -5em; } #access #sec_3 .box1{ margin-top: 55px; border: 1px solid #191919; padding: 40px 60px; } #access #sec_3 .box2{ margin-top: 40px; margin-bottom: 40px; background-color: #f5f5f5; padding: 40px 100px 50px 60px; } #access #sec_3 .box2 .txt2{ width: calc(100% - 450px); float: left; } #access #sec_3 .box2 .img1{ width: 418px; float: right; } @media screen and (max-width: 767px) { #access #sec_3 .list1>ul>li{ display: block; margin-bottom: 15px; } #access #sec_3 .list1>ul>li .img2{ width: 100%; margin-bottom: 10px; } #access #sec_3 .list1>ul>li .txtbox1{ width: 100% } #access #sec_3 .list1>ul>li .txtbox1 .title2{ margin-bottom: 5px; } #access #sec_3 .box1{ margin-top: 30px; padding: 20px 6%; } #access #sec_3 .box2{ display: block; margin-top: 20px; margin-bottom: 20px; padding: 30px 6%; } #access #sec_3 .box2 .txt2, #access #sec_3 .box2 .img1{ width: 100%; float: none; } #access #sec_3 .box2 .img1{ margin-top: 20px; text-align: center; } #access #sec_3 .box2 .img1 img{ max-width: 418px; width: 100%; } } /* --------------------------------------- #birthdayfestival --------------------------------------- */ #birthdayfestival{ color: #594435; } @media screen and (max-width: 767px) { } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } /* mainv */ #birthdayfestival #birthdaymainv{ position: relative; padding-top: 70px; padding-bottom: 70px; } #birthdayfestival #birthdaymainv .txtbox1{ display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: auto; margin-right: auto; } #birthdayfestival #birthdaymainv .txtbox1 .titlebox{ max-width: 1066px; width: 88%; } #birthdayfestival #birthdaymainv .txtbox1 .titlebox>.inwrap{ } #birthdayfestival #birthdaymainv .txtbox1 .titlebox .pagetitle{ text-align: center; } #birthdayfestival #birthdaymainv .txtbox1 .titlebox .pagetitle img{ } #birthdayfestival #birthdaymainv .txtbox1 .period{ margin-top: 30px; padding-left: 40px; display: none; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod{ display: flex; flex-direction: row; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 70px; padding-right: 10px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title>p{ background: #cb3d3a; display: flex; align-items: center; justify-content: flex-end; height: 100%; width: 140px; box-sizing: border-box; padding-right: 15px; position: relative; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title>p:after{ content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 35px 0 35px 18px; border-color: transparent transparent transparent #cb3d3a; position: absolute; top: 0; bottom: 0; right: -18px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title img{ width: 100px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .txt{ border-top: 2px solid #cb3d3a; border-bottom: 2px solid #cb3d3a; display: flex; align-items: center; justify-content: center; padding-left: 20px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .txt img{ width: 506px; } #birthdayfestival #birthdaymainv .txtbox1 .period .recruitperiod{ margin-top: 25px; text-align: center; } #birthdayfestival #birthdaymainv .txtbox1 .period .recruitperiod img{ width: 462px; } #birthdayfestival #birthdaymainv .bg{ width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; } @media screen and (max-width: 767px) { #birthdayfestival #birthdaymainv{ position: relative; padding-top: 0; padding-bottom: 0; } #birthdayfestival #birthdaymainv .txtbox1{ background: transparent; width: 100%; height: auto; display: block; } #birthdayfestival #birthdaymainv .txtbox1 .titlebox{ padding-top: 15px; padding-bottom: 15px; position: relative; height: 226px; box-sizing: border-box; width: 100%; max-width: 100%; } #birthdayfestival #birthdaymainv .txtbox1 .titlebox>.inwrap{ } #birthdayfestival #birthdaymainv .txtbox1 .titlebox .pagetitle{ text-align: center; position: absolute; left: 50%; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; margin-left: -179px; width: 358px; display: flex; align-items: center; justify-content: center; } #birthdayfestival #birthdaymainv .txtbox1 .titlebox .pagetitle img{ } #birthdayfestival #birthdaymainv .txtbox1 .period{ margin-top: 0; padding-left: 0; background: #fdf1d7; padding: 28px 6% 12px; display: block; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod{ } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title{ height: 38px; padding-right: 7px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title>p{ width: 68px; padding-right: 7px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title>p:after{ width: 0; width: 0; height: 0; border-style: solid; border-width: 19px 0 19px 14px; border-color: transparent transparent transparent #cb3d3a; right: -14px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .title img{ width: 48px; } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .txt{ padding-left: 15px; flex-grow: 1 } #birthdayfestival #birthdaymainv .txtbox1 .period .targetperiod .txt img{ width: 250px; } #birthdayfestival #birthdaymainv .txtbox1 .period .recruitperiod{ margin-top: 5px; text-align: center; } #birthdayfestival #birthdaymainv .txtbox1 .period .recruitperiod img{ width: 225px; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } #birthdayfestival .birthdaysectitle{ color: #fff; font-weight: bold; font-size: 1.5em; text-align: center; display: flex; align-items: center; justify-content: center; width: 436px; height: 58px; margin-bottom: 10px; padding-bottom: 8px; background: url(../img/birthdayfestival/birthdaysectitlebg.svg) no-repeat; background-size: contain; text-align: center; margin-left: auto; margin-right: auto; } #birthdayfestival .birthdaysectitle>span{ font-weight: bold; padding-bottom: 8px; } @media screen and (max-width: 767px) { #birthdayfestival .birthdaysectitle{ width: 300px; height: 32px; font-size: 1.2em; } #birthdayfestival .birthdaysectitle>span{ padding-bottom: 0; padding-top: 3px; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } #birthdayfestival .birthdaycopy{ font-weight: bold; font-size: 2.5em; text-align: center; line-height: 1.8; margin-bottom: 20px; letter-spacing: 0.1em; } #birthdayfestival .birthdaycopy>span{ font-weight: bold; background: linear-gradient(transparent 60%, #ffffff 60%); line-height: 1.4; } @media screen and (max-width: 767px) { #birthdayfestival .birthdaycopy{ font-size: 1.5em; line-height: 1.6; } #birthdayfestival .birthdaycopy>span{ } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } #birthdayfestival .birthdaytxt{ text-align: center; line-height: 2.2; font-weight: bold; font-size: 1.13em; } #birthdayfestival .birthdaytxt>a{ font-weight: bold; } @media screen and (max-width: 767px) { #birthdayfestival .birthdaytxt{ font-size: 1em; text-align: left; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } #birthdayfestival .campainbox{ } #birthdayfestival .campainbox .title{ text-align: center; font-weight: bold; font-size: 1.5em; color: #fff; background: #594435; padding: 8px 6%; line-height: 1.8; position: relative; } #birthdayfestival .campainbox._period .title:after{ content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #594435 transparent transparent transparent; position: absolute; bottom: -10px; left: 0; right: 0; margin-left: auto; margin-right: auto; } #birthdayfestival .campainbox .mainbox{ background: #fff; padding: 26px 4%; } @media screen and (max-width: 767px) { #birthdayfestival .campainbox .title{ font-size: 1.07em; padding: 10px 6%; } #birthdayfestival .campainbox .mainbox{ padding-left: 6%; padding-right: 6%; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } #birthdayfestival .innnerbtnlist{ display: flex; flex-direction: row; justify-content: center; margin-left: -50px; } #birthdayfestival .innnerbtnlist>li{ display: flex; margin-left: 50px; width: 410px; } #birthdayfestival .innnerbtnlist>li>.birthdaybtn{ display: flex; background: #f5a500; color: #fff; font-weight: bold; font-size: 1.5em; padding: 25px 40px 25px 6%; text-decoration: none; box-sizing: border-box; width: 100%; align-items: center; justify-content: center; line-height: 1.8; border-radius: 60px; letter-spacing: 0.1em; box-shadow: 0 6px 0px rgba(0, 0, 0, 0.1); border: 4px solid #f8c04c; position: relative; } #birthdayfestival .innnerbtnlist>li>.birthdaybtn._red{ background: #cb3d3a; border: 4px solid #db7775; } #birthdayfestival .innnerbtnlist>li>.birthdaybtn svg{ width: 36px; height: 36px; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; right: 30px; } #birthdayfestival .innnerbtnlist>li>.birthdaybtn:hover{ opacity: 1; background: #fff; color: #f5a500; } #birthdayfestival .innnerbtnlist>li>.birthdaybtn._red:hover{ background: #fff; color: #cb3d3a; } #birthdayfestival .innnerbtnlist>li>.birthdaybtn._red svg .arr_st1.st1{ stroke: #cb3d3a; } @media screen and (max-width: 767px) { #birthdayfestival .innnerbtnlist{ display: block; margin-left: 0; } #birthdayfestival .innnerbtnlist>li{ display: block; margin-left: 0; width: 100%; margin-bottom: 20px; } #birthdayfestival .innnerbtnlist>li:last-child{ margin-bottom: 0; } #birthdayfestival .innnerbtnlist>li>.birthdaybtn{ font-size: 1.2em; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } /* sec_1 */ #birthdayfestival #sec_1{ background: #fff; padding-top: 100px; padding-bottom: 110px; margin-bottom: 0; } #birthdayfestival #sec_1 .campainbox{ margin-top: 40px; border: 1px solid #594435; } #birthdayfestival #sec_1 .campainbox .mainbox p{ font-size: 1.56em; text-align: center; font-weight: bold; color: #cb3d3a; } #birthdayfestival #sec_1 .innnerbtnlist{ margin-top: 80px; } @media screen and (max-width: 767px) { #birthdayfestival #sec_1{ padding-top: 40px; padding-bottom: 50px; } #birthdayfestival #sec_1 .campainbox{ margin-top: 20px; } #birthdayfestival #sec_1 .campainbox .mainbox p{ font-size: 1.07em; } #birthdayfestival #sec_1 .innnerbtnlist{ margin-top: 40px; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } /* sec_2 */ #birthdayfestival #sec_2{ background: #ffe265; padding-top: 100px; padding-bottom: 110px; margin-bottom: 0; } #birthdayfestival #sec_2 .list1{ overflow: hidden; margin-top: 50px; } #birthdayfestival #sec_2 .list1>ul{ display: flex; flex-direction: row; justify-content: space-between; margin-left: -30px; margin-bottom: -30px; flex-wrap: wrap; } #birthdayfestival #sec_2 .list1>ul>li{ margin-left: 30px; margin-bottom: 30px; width: calc(50% - 30px); } #birthdayfestival #sec_2 .list1>ul>li>.inwrap{ background: #fff; position: relative; padding: 20px 35px; display: flex; flex-direction: row; justify-content: space-between; box-sizing: border-box; height: 100%; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1{ display: flex; padding-bottom: 30px; padding-top: 100px; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .ribon{ position: absolute; top: 0; left: 40px; font-weight: bold; font-size: 1.5rem; color: #fff; background: #f5a500; display: flex; align-items: center; justify-content: center; width: 100px; height: 78px; padding-bottom: 10px; box-sizing: border-box; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .ribon:after{ content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 50px 14px 50px; border-color: transparent transparent #ffffff transparent; position: absolute; bottom: 0; left: 0; right: 0; } #birthdayfestival #sec_2 .list1>ul>li._first .txtbox1 .ribon{ width: 206px; height: 88px; background: #cb3d3a; } #birthdayfestival #sec_2 .list1>ul>li._first .txtbox1 .ribon:after{ border-width: 0 103px 14px 103px; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .mainbox{ margin-top: auto; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .title{ font-weight: bold; font-size: 1.5em; line-height: 1.6; margin-bottom: 10px; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .title span{ font-weight: bold; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .title .sub{ font-size:0.83em; } #birthdayfestival #sec_2 .list1>ul>li._first .txtbox1 .title{ font-weight: bold; font-size: 1.88em; } #birthdayfestival #sec_2 .list1>ul>li._first .txtbox1 .title .sub{ font-size: 0.67em; } #birthdayfestival #sec_2 .list1>ul>li .limitnumber{ display: inline-block; background: #594435; color: #fff; padding: 15px 20px; box-sizing: border-box; border-radius: 30px; font-weight: bold; line-height: 1; min-width: 142px; text-align: center; margin-top: 25px; } #birthdayfestival #sec_2 .list1>ul>li .limitnumber .num{ font-size: 1.88em; display: inline-block; font-weight: bold; } #birthdayfestival #sec_2 .list1>ul>li .imgbox1{ display: flex; align-items: center; flex-shrink: 0; position: relative; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(1) .imgbox1 img{ width: 193px; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(2) .imgbox1 img{ width: 269px; } #birthdayfestival #sec_2 .list1>ul>li .imgbox1 .sample{ background: #fff; border: 2px solid #594435; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; display: flex; align-items: center; justify-content: center; width: 95px; height: 35px; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .txtbox1, #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .imgbox1{ padding-bottom: 15px; padding-top: 75px; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .txtbox1 .mainbox{ margin-top: 0; display: flex; align-items: center; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .txtbox1 .title{ font-size: 1.38em; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .txtbox1 .title .sub{ font-size: 0.91em; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .limitnumber{ margin-top: 0; } @media screen and (max-width: 767px) { #birthdayfestival #sec_2{ padding-top: 40px; padding-bottom: 50px; } #birthdayfestival #sec_2 .list1{ margin-top: 30px; } #birthdayfestival #sec_2 .list1>ul{ display: block; margin-left: 0; margin-bottom: -20px; } #birthdayfestival #sec_2 .list1>ul>li{ margin-left: 0; margin-bottom: 20px; width: 100%; } #birthdayfestival #sec_2 .list1>ul>li>.inwrap{ padding: 20px 6% 30px; height: auto; display: block; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1{ display: block; padding-bottom: 30px; padding-top: 75px; flex-shrink: 0 } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .ribon{ position: absolute; top: 0; left: 6%; font-weight: bold; font-size: 1.25rem; color: #fff; background: #f5a500; display: flex; align-items: center; justify-content: center; width: 80px; height: 70px; padding-bottom: 10px; box-sizing: border-box; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .ribon:after{ border-width: 0 40px 14px 40px; } #birthdayfestival #sec_2 .list1>ul>li._first .txtbox1 .ribon{ width: 186px; height: 80px; background: #cb3d3a; } #birthdayfestival #sec_2 .list1>ul>li._first .txtbox1 .ribon:after{ border-width: 0 93px 14px 93px; } #birthdayfestival #sec_2 .list1>ul>li .txtbox1 .title{ font-size: 1.25em; } #birthdayfestival #sec_2 .list1>ul>li._first .txtbox1 .title{ font-size: 1.5em; } #birthdayfestival #sec_2 .list1>ul>li .limitnumber{ padding: 10px 15px; border-radius: 25px; min-width: 110px; margin-top: 15px; font-size: 0.87em; } #birthdayfestival #sec_2 .list1>ul>li .limitnumber .num{ font-size: 1.4em; } #birthdayfestival #sec_2 .list1>ul>li .imgbox1{ flex-shrink: 1; justify-content: center; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(1) .imgbox1 img{ width: 143px; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(2) .imgbox1 img{ width: 219px; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .txtbox1, #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .imgbox1{ padding-bottom: 0; padding-top: 0; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .txtbox1{ padding-top: 75px; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .imgbox1{ margin-top: 20px; text-align: left; justify-content: flex-start; } #birthdayfestival #sec_2 .list1>ul>li:nth-child(n+3) .txtbox1 .title{ font-size: 1.25em; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } /* sec_3 */ #birthdayfestival #sec_3{ background: #f4f6f6; padding-top: 100px; padding-bottom: 110px; margin-bottom: 0; } #birthdayfestival #sec_3 .birthdaycopy>span{ background: linear-gradient(transparent 60%, #fff100 60%); } #birthdayfestival #sec_3 .box1{ margin-top: 60px; } #birthdayfestival #sec_3 .box1 .mainbox{ padding: 50px 8%; } #birthdayfestival #sec_3 .box1 .list1{ } #birthdayfestival #sec_3 .box1 .list1>li{ margin-bottom: 10px; } #birthdayfestival #sec_3 .box1 .list1>li:last-child{ margin-bottom: 0; } #birthdayfestival #sec_3 .box1 .list1>li>dl{ display: flex; flex-direction: row; align-items: flex-start; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dt{ width: 142px; color: #fff; font-size: 0.88em; font-weight: bold; flex-shrink: 0; margin-right: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; line-height: 1; letter-spacing: 0.05em; } #birthdayfestival #sec_3 .box1 .list1>li:nth-child(n+2){ margin-top: -10px; } #birthdayfestival #sec_3 .box1 .list1>li:nth-child(n+2)>dl>dd{ padding-top: 20px; } #birthdayfestival #sec_3 .box1 .list1>li:first-child>dl>dt{ background: url(../img/birthdayfestival/flow1.svg) no-repeat; background-size: 100% auto; min-height: 184px; } #birthdayfestival #sec_3 .box1 .list1>li:last-child>dl>dt{ background: url(../img/birthdayfestival/flow2.svg) no-repeat; background-size: 100% auto; min-height: 178px; padding-top: 40px; box-sizing: border-box; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dt .num{ font-size: 2.57em; display: block; line-height: 1.4; text-align: center; font-weight: bold; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd{ font-size: 1.13em; } #birthdayfestival #sec_3 .box1 .caution{ font-size: 0.89em; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd .box2{ background: #fef4e0; padding: 20px 4%; margin-top: 10px; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd .box2 .list2{ text-align: left; margin-left: -20px; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd .box2 .list2>li{ display: inline-block; vertical-align: middle; margin-left: 20px; } #birthdayfestival #sec_3 .box2{ margin-top: 40px; } #birthdayfestival #sec_3 .box1.box3{ margin-top: 40px; } #birthdayfestival #sec_3 .box4, #birthdayfestival #sec_3 .box5{ font-size: 1.13em; } #birthdayfestival #sec_3 .box5{ margin-top: 40px; } #birthdayfestival #sec_3 .list3{ margin-top: 40px; } #birthdayfestival #sec_3 .list3>li{ margin-bottom: 20px; } #birthdayfestival #sec_3 .list3>li:last-child{ margin-bottom: 0; } #birthdayfestival #sec_3 .list3>li>dl{ background: #eeeceb; padding-bottom: 30px; } #birthdayfestival #sec_3 .list3>li>dl>dt{ display: flex; flex-direction: row; align-items: center; margin-bottom: 40px; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle{ border: 4px solid #594435; background: #fff; display: flex; align-items: center; justify-content: center; width: 186px; height: 100px; font-weight: bold; font-size: 1.25em; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle img.round{ width: 62px; height: 62px; margin-right: 10px; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle img.cross{ width: 54px; height: 54px; margin-right: 10px; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle+.cap{ margin-left: 25px; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd{ padding: 0px 7%; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap{ display: flex; flex-direction: row; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .txtbox1{ } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .imgbox1{ width: 45%; flex-shrink: 0; margin-left: 8.1%; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4{ } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li{ font-size: 1.11em; margin-top: 10px; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl{ display: flex; flex-direction: row; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl>dt{ flex-shrink: 0 } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl>dt .num{ position: relative; width: 30px; height: 30px; display: inline-block; margin-right: 5px; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl>dt .num:before{ content: ""; background: #594435; width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl>dt .num>span{ font-size: 0.75em; font-weight: bold; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; position: relative; z-index: 1; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl>dd{ font-weight: bold; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl{ padding-bottom: 50px; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5{ display: flex; flex-direction: row; justify-content: space-between; margin-left: -60px; padding-left: 10%; padding-right: 10%; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li{ margin-left: 60px; width: calc(33.33% - 60px); } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li .title2{ font-weight: bold; margin-bottom: 10px; text-align: center; font-size: 1.13em; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li .img { text-align: center; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li .img img{ height: 330px; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd{ } @media screen and (max-width: 767px) { #birthdayfestival #sec_3{ padding-top: 40px; padding-bottom: 50px; } #birthdayfestival #sec_3 .box1{ margin-top: 30px; } #birthdayfestival #sec_3 .box1 .mainbox{ padding: 30px 6%; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dt{ width: 50px; font-size: 0.57em; margin-right: 15px; } #birthdayfestival #sec_3 .box1 .list1>li:nth-child(n+2){ margin-top: 0; } #birthdayfestival #sec_3 .box1 .list1>li:nth-child(n+2)>dl>dd{ padding-top: 5px; } #birthdayfestival #sec_3 .box1 .list1>li:first-child>dl>dt{ background: url(../img/birthdayfestival/flow1_middle.svg) no-repeat; background-size: 100% auto; min-height: 62px; } #birthdayfestival #sec_3 .box1 .list1>li:last-child>dl>dt{ background: url(../img/birthdayfestival/flow2_middle.svg) no-repeat; background-size: 100% auto; min-height: 58px; padding-top: 10px; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dt .num{ font-size: 1.6em; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd{ font-size: 1em; margin-top: -7px; line-height: 1.8; } #birthdayfestival #sec_3 .box1 .caution{ font-size: 0.9em; margin-top: 0 } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd .box2{ padding: 10px 6%; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd .box2 .list2{ margin-left: 0; } #birthdayfestival #sec_3 .box1 .list1>li>dl>dd .box2 .list2>li{ display: block; margin-left: 0; } #birthdayfestival #sec_3 .box2{ margin-top: 10px; } #birthdayfestival #sec_3 .box1.box3{ margin-top: 40px; } #birthdayfestival #sec_3 .box4, #birthdayfestival #sec_3 .box5{ font-size: 1em; } #birthdayfestival #sec_3 .box5{ margin-top: 30px; } #birthdayfestival #sec_3 .list3{ margin-top: 30px; } #birthdayfestival #sec_3 .list3>li{ margin-bottom: 10px; } #birthdayfestival #sec_3 .list3>li>dl>dt{ margin-bottom: 20px; display: block; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle{ border: 2px solid #594435; width: 150px; height: 60px; font-size: 1.15em; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle img.round{ width: 30px; height: 30px; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle img.cross{ width: 20px; height: 20px; } #birthdayfestival #sec_3 .list3>li>dl>dt .maintitle+.cap{ margin-left: 6%; margin-right: 6%; margin-top: 20px; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd{ padding: 0px 6%; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap{ display: block; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .txtbox1{ } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .imgbox1{ width: 100%; margin-left: 0; margin-top: 20px; text-align: center; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .imgbox1 img{ max-width: 365px; width: 100%; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4{ } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li{ font-size: 1.11em; margin-top: 10px; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl{ display: flex; flex-direction: row; } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl>dt{ flex-shrink: 0 } #birthdayfestival #sec_3 .list3>li:nth-child(1)>dl>dd>.inwrap .list4>li>dl>dt .num{ width: 26px; height: 26px; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl{ padding-bottom: 30px; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5{ display: block; margin-left: 0; padding-left: 6%; padding-right: 6%; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li{ margin-left: 0; width: 100%; margin-bottom: 20px; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li:last-child{ margin-bottom: 0; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li .title2{ font-size: 1em; margin-bottom: 5px; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd .list5>li .img img{ height: auto; max-width: 210px; width: 100%; } #birthdayfestival #sec_3 .list3>li:nth-child(2)>dl>dd{ } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ } /* sec_4 */ #birthdayfestival #sec_4{ background: #ffe98c; padding-top: 100px; padding-bottom: 110px; margin-bottom: 0; } #birthdayfestival #sec_4 .incnt{ max-width: 880px; } #birthdayfestival #sec_4 .birthdaytxt{ margin-bottom: 40px; } #birthdayfestival #sec_4 .formbox1{ font-size: 1.18em; margin-bottom: 50px; } #birthdayfestival #sec_4 .formbox1>ul{ } #birthdayfestival #sec_4 .formbox1>ul>li{ margin-bottom: 35px; } #birthdayfestival #sec_4 .formbox1>ul>li:last-child{ margin-bottom: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl{ display: flex; flex-direction: row; justify-content: space-between; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dt{ flex-shrink: 0; width: 175px; padding-top: 20px; } #birthdayfestival #sec_4 .formbox1>ul>li._file>dl>dt{ padding-top: 10px; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd{ flex-grow: 1; display: flex; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd>input, #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd>select{ flex-grow: 1; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist{ margin-left: -30px; display: flex; flex-direction: row; justify-content: space-between; flex-grow: 1 } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li{ display: flex; flex-direction: row; margin-left: 15px; align-items: center; flex-grow: 1 } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li p:first-child{ margin-left: 15px; flex-shrink: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li p:first-child+p, #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li p:first-child+input, #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li p:first-child+select{ flex-grow: 1; margin-left: 15px; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .tatelist{ display: flex; flex-direction: column; flex-grow: 1 } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .tatelist>li{ margin-bottom: 30px; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .tatelist>li:last-child{ margin-bottom: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist._address>li._1{ flex-shrink: 0; width: 400px } #birthdayfestival #sec_4 .formbox1>ul>li>dl{ } #birthdayfestival #sec_4 .formbox1 input[type="text"], #birthdayfestival #sec_4 .formbox1 input[type="tel"], #birthdayfestival #sec_4 .formbox1 input[type="email"], #birthdayfestival #sec_4 .formbox1 input[type="password"], #birthdayfestival #sec_4 .formbox1 select{ background: #fff; border-radius: 10px; height: 75px; border: 1px solid #fff!important; font-size: 18px; width: 100% !important; } #birthdayfestival #sec_4 .formbox1 select { position: relative; background: url("../img/birthdayfestival/arr.svg") no-repeat 97% center, #fff; background-size: 16px 14px; padding-right: 40px; } #birthdayfestival #sec_4 .formbox1 select.select1{ width: 346px !important; } #birthdayfestival #sec_4 .formbox1 select:after{ } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .tatelist{ position: relative; } #birthdayfestival #sec_4 .formbox1 .uploadButton{ background: #594435; border: 1px solid #594435; font-size: 18px; display: inline-block; padding:14px 42px; box-sizing: border-box; border-radius: 14px; color: #fff; line-height: 1.4; font-weight: normal; } #birthdayfestival #sec_4 .formbox1 .uploadButton>.wpcf7-form-control-wrap{ position: static; } #birthdayfestival #sec_4 .formbox1 .uploadButton .wpcf7-not-valid-tip{ position: absolute; bottom: 0; right: -145px; } #birthdayfestival #sec_4 .formbox1 .uploadButton input { display: none; } #birthdayfestival #sec_4 .formbox1 .caution{ font-size: 0.89em; } #birthdayfestival #sec_4 .btnarea{ margin-top: 50px; } #birthdayfestival #sec_4 .btnarea label._submit{ position: relative; height: 100px; } #birthdayfestival #sec_4 .btnarea label._submit>input{ display: flex; background: #cb3d3a; color: #fff; font-weight: bold; font-size: 1.5em; padding: 25px 40px 25px 6%; text-decoration: none; box-sizing: border-box; width: 410px; align-items: center; justify-content: center; line-height: 1.8; border-radius: 60px; letter-spacing: 0.1em; box-shadow: 0 6px 0px rgba(0, 0, 0, 0.1); max-width: 100%; border: 4px solid #db7775!important; position: relative; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; } #birthdayfestival #sec_4 .btnarea label._submit:after{ content: ""; display: inline-block; background: url(../img/birthdayfestival/arr_red.svg) no-repeat; background-size: contain; width: 36px; height: 36px; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; right: 30px;-webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s; } #birthdayfestival #sec_4 .btnarea label._submit:hover>input{ background: #fff; color: #cb3d3a; } @media screen and (max-width: 767px) { #birthdayfestival #sec_4{ padding-top: 40px; padding-bottom: 50px; } #birthdayfestival #sec_4 .birthdaytxt{ margin-bottom: 30px; } #birthdayfestival #sec_4 .formbox1{ font-size: 1.07em; margin-bottom: 40px; } #birthdayfestival #sec_4 .formbox1>ul>li{ margin-bottom: 25px; } #birthdayfestival #sec_4 .formbox1>ul>li>dl{ display: block; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dt{ width: 100%; padding-top: 0; margin-bottom: 10px; font-weight: bold; } #birthdayfestival #sec_4 .formbox1>ul>li._file>dl>dt{ padding-top: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd{ width: 100%; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist{ margin-left: 0; display: block; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li{ margin-left: -15px; margin-bottom: 10px; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li:last-child{ margin-bottom: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li._2{ display: block; margin-left: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li._2 p{ margin-left: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist>li._2 input{ width: 100%; margin-top: 5px; box-sizing: border-box; margin-left: 0; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .yokolist._address>li._1{ width: auto; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .tatelist{ display: block; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd .tatelist>li{ margin-bottom: 20px; } #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd span.tel, #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd span.item, #birthdayfestival #sec_4 .formbox1>ul>li>dl>dd span.email{ width: 100%; } #birthdayfestival #sec_4 .formbox1 input[type="text"], #birthdayfestival #sec_4 .formbox1 input[type="tel"], #birthdayfestival #sec_4 .formbox1 input[type="email"], #birthdayfestival #sec_4 .formbox1 input[type="password"], #birthdayfestival #sec_4 .formbox1 select{ height: 50px; font-size: 16px; } #birthdayfestival #sec_4 .formbox1 .uploadButton{ font-size: 16px; padding:10px 30px; border-radius: 10px; } #birthdayfestival #sec_4 .formbox1 select.select1{ width: 100%!important; } #birthdayfestival #sec_4 .btnarea{ margin-top: 30px; } #birthdayfestival #sec_4 .btnarea label._submit{ width: 100%; height: 80px; } #birthdayfestival #sec_4 .btnarea label._submit>input{ font-size: 1.25em; padding: 20px 4% 20px 6%; width: 100%; border-radius: 40px; } #birthdayfestival #sec_4 .btnarea>ul>li{ display: block; } #birthdayfestival #sec_4 .formbox1 .uploadButton .wpcf7-not-valid-tip{ right: -135px; } } @media screen and (max-width: 639px){ } @media screen and (max-width: 479px){ #birthdayfestival #sec_4 .formbox1 .uploadButton .wpcf7-not-valid-tip{ right: -125px; } } /* sec_2 */ #thanks #sec_1 .link1{ text-align: center; margin-top: 60px; } @media screen and (max-width: 767px) { } #birthdayfestival .wpcf7 form.invalid .wpcf7-response-output { border: none; background: #fff; } #birthdayfestival .wpcf7 form.sent .wpcf7-response-output { display: none!important; } #birthdayfestival .wpcf7 form .wpcf7-response-output { margin: 30px 0; padding: 4% 6%; border: none; }