@charset "UTF-8";

/*********************
color 色設定
*********************/

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body,
header,
main,
section,
footer,
h1,
h2,
h3,
h4,
h5,
ul,
li,
dl,
dt,
dd,
p,
img {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'MyYuGothicM', 'Noto Serif JP', serif;
    font-weight: normal;
    src: local('YuGothic-Medium'), /* PostScript Name = localの正式な指定方法 */
    local('Yu Gothic Medium'), /* PostScript Nameを認識できないChrome用にFull Nameを指定 */
    local('YuGothic-Regular');
}

@font-face {
    font-family: 'MyYuGothicM', 'Noto Serif JP', serif;
    font-weight: bold;
    src: local('YuGothic-Bold'), /* PostScript Name = localの正式な指定方法 */
    local('Yu Gothic');
}

body {
    font-size: 3.6vw;
    width: 100%;
    font-feature-settings: "palt"1;
    letter-spacing: .1em
}

img {
    border: none;
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
    width: auto;
}

.wrap {
    padding: 0 5%;
    font-family: YuMincho, /* Mac用 */
    'Yu Mincho', /* Windows用 */
    'Noto Serif JP', serif;
    text-align: center;
}

p {
    font-family: YuMincho, /* Mac用 */
    'Yu Mincho', 'Noto Serif JP', serif;
    /* Windows用 */
    color: #750F43;
}

.btn,
a.btn,
button.btn {
    font-family: YuMincho, /* Mac用 */
    'Yu Mincho', 'Noto Serif JP', serif;
    /* Windows用 */
    font-size: 3.367vw;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: .8rem 2rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #007987;
    border-radius: 0.5rem;
    width: 62.467vw;
}

.btn i {
    position: absolute;
    width: auto;
    top: 16px;
    right: 10%;
}

a.gbtn-flat {
    overflow: hidden;
    color: #fff;
    border-radius: 0;
    background: #007987;
}

a.gbtn-flat span {
    position: relative;
}

a.gbtn-flat:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    background: #750F43;
}

a.gbtn-flat:hover:before {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

a.ybtn-flat {
    overflow: hidden;
    color: #1F468B;
    border-radius: 0;
    background: #FFE45D;
    border: solid 1px #1F468B;
    font-weight: bold;
}

a.ybtn-flat span {
    position: relative;
}

a.ybtn-flat:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    background: #F3F6FF;
}

a.ybtn-flat:hover:before {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

a.grbtn-flat {
    overflow: hidden;
    color: #1F468B;
    border: solid 1px #1F468B;
    border-radius: 0;
    background: #F3F6FF;
    font-weight: bold;
}

a.grbtn-flat span {
    position: relative;
}

a.grbtn-flat:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    background: #FFE45D;
}

a.grbtn-flat:hover:before {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.fadein {
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
}

.fadein.active {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

.por {
    position: relative;
}

.tac {
    text-align: center;
}

.fv {
    background: transparent radial-gradient(closest-side at 50% 50%, var(--unnamed-color-ffffff) 0%, #FFFDFD 30%, #F7D8D7 100%) 0% 0% no-repeat padding-box;
    background: transparent radial-gradient(closest-side at 50% 50%, #FFFFFF 0%, #FFFDFD 30%, #F7D8D7 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.logo {
    width: 26.533vw;
    padding: 5% 0;
}

.fv_line img {
    width: 100vw;
}

.fv_01 {
    background-color: #D67695;
    text-align: center;
    position: relative;
}

.fv_01 h2 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 6vw;
    padding: 5% 0 0;
}

.fv_01 p {
    color: #FFFFFF;
    font-size: 4vw;
    font-weight: normal;
    padding-bottom: 7%;
}

.fv01_01 {
    background-color: #ffffff;
    padding: 6% 8%;
}

.fv_01l {
    background-color: #F7D8D7;
    position: absolute;
    width: 67.2vw;
    top: 30%;
    padding: 3% 3%;
}

.fv_01l img {
    color: #007987;
    font-weight: bold;
    text-align: left;
    width: 41.467vw;
    margin: 0 auto;
}

.fv_01r {
    background-color: #F7D8D7;
    position: absolute;
    width: 61.2vw;
    bottom: -5%;
    right: 0;
}

.fv_01r img {
    margin: 0 auto;
    width: 30.133vw;
    z-index: 999;
}

.sec01 {
    background-color: #fff;
    padding: 0% 0 0%;
}

.try {
    background-image: url(../image/trybg.png);
    background-size: cover;
    background-position: bottom;
    padding: 5% 0;
    text-align: center;
}

.sec01 .inbox {
    background-image: url(../image/sec01_trybox.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 2%;
    border-radius: 20px;
    padding: 10% 0;
}

.sec01 .por {
    background-color: #FBF0E5;
}

.tryin {
    padding: 2% 0
}

.sec01_tryinbox {
    padding: 5%;
    width: 76vw;
    position: relative;
    margin: 0 auto;
}

.sec01_imboxk {
    padding: 0% 0 0;
    width: 15.375vw;
    margin: 0 auto;
}

.sec01_suuryou {
    position: absolute;
    width: 20.8vw;
    top: -7vw;
    right: 5vw;
}

.sec01_bgr {
    position: absolute;
    right: 0;
    top: 3%;
    width: 2.8vw;
}

.sec01_bgl {
    position: absolute;
    left: 0;
    transform: scale(-1, 1);
    top: 3%;
    width: 2.8vw;
}

.sec01_ttl {
    width: 52.8vw;
    margin: 0 auto;
    padding: 2% 0 2%;
}

.sec01_fb2 {
    width: 72.667vw;
    font-weight: bold;
    color: #C6006F;
    margin: 0 auto;
}

.sec01_fb2 h2 {
    color: #C6006F;
}

.sec01_02sttl {
    text-align: left;
    padding: 5% 1% 0%
}

.sec01_02 img {
    width: 53.333vw;
    margin: 3% auto 2%;
}

.sec01_02ttl img {
    width: 64.911vw;
    margin: 3% auto 0%;
}

.sec01_02sttl img {
    width: 36.844vw;
    font-weight: bold;
}

.try_price {
    display: flex;
    width: 62.467vw;
    align-items: center;
    justify-content: space-between;
    margin: 5% auto 2%;
}

.sec01_02info img {
    width: 31.223vw;
    margin: 5% 7% 2% 0;
}

.price img {
    width: 28.736vw;
    margin: 5% auto 8%;
}

.sec01_btn {
    padding: 2% 0 4%;
}

.sec01_02 {
    text-align: center;
}

.sec01_02text {
    width: 61.867vw;
    margin: 0% auto 0;
    padding: 7% 0 4%;
}

.sec01_cottonindex {
    padding: 1% 10%;
}

.sec01_cottonbox {
    display: flex;
    padding: 2% 0;
}

.sec01_cotton {
    width: 29.6vw;
}

.sec01_cottonbox p {
    font-weight: bold;
    text-align: left;
}

.sec02 {
    padding: 15% 0 5%;
    background-color: #F9E4E3;
}

.sec02 h2 {
    font-family: YuMincho, /* Mac用 */
    'Yu Mincho', 'Noto Serif JP', serif;
    /* Windows用 */
    color: #750F43;
    font-weight: bold;
    position: relative;
    width: 52.333vw;
    padding: 1rem 0.5rem;
    border: 3px solid #750F43;
    font-size: 4vw;
    background-color: #FFFFFF;
    margin: -8% auto;
    z-index: 999;
}

.sec02 h2:before {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    content: '';
    border: 1px solid #750F43;
}

.sec02.inbox {
    border: solid 1px #750F43;
    background-color: #fff;
    padding: 10% 5%;
    position: relative;
}

.sec02.inbox p {
    text-align: left;
    font-weight: bold;
    font-size: 3.6vw;
    padding: 2.5% 0;
}

.sec02_info img {
    padding: 5% 0 2%;
}

.dwtr {
    position: absolute;
    width: 10.533vw;
    transform: scale(-1, 1);
    top: -2.5vw;
    right: -2.5vw;
}

.dwtl {
    position: absolute;
    width: 10.533vw;
    top: -2.5vw;
    left: -2.5vw;
}

.dwbr {
    position: absolute;
    width: 10.533vw;
    transform: scale(-1, -1);
    bottom: -2.5vw;
    right: -2.5vw;
}

.dwbl {
    position: absolute;
    width: 10.533vw;
    transform: scale(1, -1);
    bottom: -2.5vw;
    left: -2.5vw;
}

.sec03 {
    padding: 5% 0 10%;
    background-color: #F9E4E3;
    text-align: center;
}

.sec03_ttlt {
    width: 42.667vw;
}

.sec03_ttl {
    width: 80.667vw;
    margin: 4% auto 15%;
}

.sec03 h2 {
    font-family: YuMincho, /* Mac用 */
    'Yu Mincho', 'Noto Serif JP', serif;
    /* Windows用 */
    color: #750F43;
    font-weight: bold;
    position: relative;
    width: 52.333vw;
    padding: 1rem 0.5rem;
    border: 3px solid #750F43;
    font-size: 4vw;
    background-color: #FFFFFF;
    margin: -8% auto;
    z-index: 999;
}

.sec03 h2:before {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    content: '';
    border: 1px solid #750F43;
}

.sec03.inbox {
    border: solid 1px #750F43;
    background-color: #FFFFFF;
    padding: 10% 5%;
    position: relative;
}

.sec03 h3 {
    font-size: 6vw;
    font-weight: bold;
    color: #C6006F;
}

.cottonlist p {
    font-size: 4vw;
    color: #184055;
    font-weight: bold;
}

.cotton_img img {
    width: 55.733vw;
    padding: 0% 0 5%;
}

h4 {
    position: relative;
    padding: 0 65px;
    text-align: center;
    color: #184055;
    margin: 2.5% 5%;
}

h4:before {
    position: absolute;
    top: calc(50% - 1px);
    left: 10%;
    width: 80%;
    height: 1px;
    content: '';
    background: #184055;
}

h4 span {
    position: relative;
    padding: 0 .5em;
    background: #ffffff;
}

.sec03_line {
    margin: 1% auto 5%;
}

.sec03_btn {
    margin: 5% auto;
}

.footer {
    background-color: #F2B8B8;
    text-align: center;
    padding: 10% 0 20%;
}

.footer p {
    font-weight: bold;
    padding: 0 0 3% 0;
}

.foot_t {
    width: 33.333vw;
}

.footer .inbox {
    background-color: #fff;
    border-radius: 10px;
    width: 63.333vw;
    margin: 0 auto 0;
}

.footer .inbox img {
    width: 10.267vw;
    margin: 5%;
}

.page_top {
    height: 60px;
    position: fixed;
    right: 10px;
    opacity: 0.8;
    width: 10.533vw;
}

.page_top img {
    width: 10.533vw;
}