:root{
    /* 文字カラー */
    --color-text-title: rgb(9,40,82);
    --color-text-white: rgb(255,255,255);

    /* 背景カラー */
   --color-background-baseWhite :  rgb(255,255,255);
   --color-background-skyBlue :  rgb(153,206,212);
   --color-background-backText :  rgb(0,181,206);
   --color-background-strongRed : rgb(175,86,82);
   --color-background-whitegray : rgb(247,247,247);
   --color-background-gray : rgb(217,217,217);
   --color-background-pink : rgb(238,182,183);

    /* 基本フォント */
    --font-base : 'ヒラギノ角ゴシック','Hiragino Sans','Noto Sans JP',YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif;
    
    /* サイズ */
    --header-height : 90px;                 /* ヘッダーの高さ */
    --header-heightSP : 50px;
    --maxWeight : 1200px;
    --Weight:90%;
}



/* ================= 共通 =================*/
html{
    background-color: var( --color-background);
    -webkit-font-smoothing: antialiased;
}
body{
    -webkit-text-size-adjust: 100%;
}
html,body{
    margin: 0; padding: 0;
    overflow-x:hidden;
    font-family: var(--font-base);
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    z-index: 0;
}


.tbOnly{
    display: none;
}
.spOnly,.spOnly2{
    display: none;
}

.animation{
    opacity: 0;
    transition: all 0.5s ease;
    transition-delay: 0.5s;
}
.animation-active{
    opacity: 1;
}



/* 幅 */
.mainWidth{
    width: var(--Weight);
    max-width: var(--maxWeight);
    margin: 0 auto;
}


/* flex */
.flex{
    display: flex;
}
.flex-center{
    justify-content: center;
    align-items: center;
}
.flex-centerLeft{
    justify-content: flex-start;
    align-items: center;
}
.flex3{
    width: 30%;
}
.flex4{
    width: 40%;
}
.flex5{
    width: 50%;
}
.flex6{
    width: 60%;
}
.flex31{
    width: calc(100% / 3);
}



/* 位置 */
.criterion{
    position: relative;
}
.center{
    position: absolute;
    top: 50%; left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
.centerBottom{
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.leftCenter{
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.rightCenter{
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}


/* ボタン */
.startButton{
    width: 280px; height: 55px;
    background: rgb(74,107,153);
    background: linear-gradient(90deg, rgba(74,107,153,1) 0%, rgba(9,42,82,1) 100%);
    padding: 0;
    border: none;
    outline: none;
    line-height: 55px;
    border-radius: 27.5px;
    text-align: center;
    text-decoration:none;
    font-size: 17px;
    color: var(--color-text-white);
    font-weight: 600;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: all 0.5s ease;
}
.startButton:hover,.startButton:active,.startButton:focus{
    background: rgb(9,42,182);
    background: linear-gradient(90deg, rgba(9,42,82,1) 0%, rgba(74,107,153,1) 100%);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 10px;
}

/* タイトル */
.titleBaseCenter{
    font-size: 58px;
    text-align: center;
    color: var(--color-text-title);
}
.titleMiddleCenter{
    font-size: 40px;
    text-align: center;
    color: var(--color-text-title);
}
.titleUnderBar{
    display: inline-block;
    margin: 0;
    position: relative;
    font-size: 40px;
    padding: 0 30px;
    color: var(--color-text-title);
}
.titleUnderBarBackGround{
    position: absolute;
    bottom: 0px; right: 0;
    width: 100%; height: 30px;
    background-color:  var(--color-background-backText);
    z-index: -1;
}

/* リストクリア */
.listClear{
    list-style: none;
    padding: 0;
}


/* 登録 */
.EncourageRegistration{
    width: 90%; max-width: 1200px;
    margin: 0 auto;
}
.EncourageRegistrationOuter{
    margin: 35px 0 100px 0;    
}
.EncourageRegistrationInner{
    width: 100%;
    border-radius: 500px;
    padding: 40px 0;
    text-align: center;
    background-color: var(--color-background-backText);
}
.EncourageRegistrationInner p{
    width: 90%;
    margin: 0px 5% 20px 5%;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-title);
}
.EncourageRegistrationInner a{
    display: inline-block;
}
.EncourageRegistrationInner img{
    position: absolute;
    width: 155px;
    padding-right: 100px;
}

/* ================= header =================*/
header{
    width: 100%; height: var(--header-height);
}
#headerBackground{
    width: 100%; height: var(--header-height);
    z-index: 20;
    border-radius: 0 0 12.5px 12.5px;
    background-color: var(--color-background-backText);
    overflow: hidden;
}
#headerInner{
    flex-wrap: nowrap;
}
#headerLogo{
    width: 120px; height: 120px;
    border-radius: 50%;
    background-color: var(--color-background-baseWhite);
    margin: -15px 0;
    overflow: hidden;
}
#headerLogo img{
    width: 85%;
}
#headerInner nav{
    margin-left: 40px;
}
#headerInner nav ul{
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0; margin: 0;
}
#headerInner nav ul li{
    margin-right: 10px;
}
#headerInner nav ul a{
    display: block;
    text-decoration:none;
    min-width: 150px;
    line-height: 1.2;
    padding: 10px 0;
}
#headerInner nav ul a span:first-child{
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text-white);
}
#headerInner nav ul a span:last-child{
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-title);
}
#headerInner .startButton{
    position: absolute;
    top: 17.5px; right: 0;
}

/* ================= headTitle =================*/
#headTitle-top{
    height: 760px;
}
#headTitle-left{
    width: 100%; height: calc(100% - 30px);
    margin-top: 15px;
    color: var(--color-text-title);
    overflow: visible;
}
#headTitle-left-inner{
    position: absolute;
    top: 0; right: 0;
    width: 100%; height: 100%;
    z-index: 3;
}
#headTitle-left-inner img{
    width: 100%;
    margin: 50px auto 20px auto;
}
#headTitle-left-inner h1{
    transform: rotate(-3deg);
    font-size: 65px;
    font-family: 'Zen Kurenaido', sans-serif;
    white-space: nowrap;
    margin-left: -20px;
}
#headTitle-left-inner p{
    display: block;
    margin-top: 15px;
    font-weight: 700;
    font-size: 25px;
}
#headTitle-left-inner p.animation-custom{
    opacity: 0;
    transition: all 0.75s ease;
    transform:translateY(50px);
    transition-delay: 1s;
}
#headTitle-left-inner p.animation-custom-active{
    opacity: 1;
    transform:translateX(0px);
}
#headTitle-left-inner span{
    display: block;
    margin-top: 20px;
    font-size: 48px;
}
#headTitle-right img{
    width: 100%; height: calc(100% + 25px);
    object-fit: cover;
    object-position: center left;
}
#headTitle-img{
    padding-top: 80px;
    width: 360px;
}
#headTitle-bottom{
    width: 100%; height: 120px;
}
#headTitle-bottom-inner{
    width: 100%; height: 120px;
    z-index: 18;
    background-color: var(--color-background-skyBlue);
} 
#headTitle-bottom-inner div{
    height: 80px;
}
#headTitle-bottom-image{
    width: 80%;
    position: absolute;
    bottom: 25%; left: 0;
}


/* ================= about =================*/
#about{
    margin-top: 80px;
}
#about .titleUnderBar{
    font-size: 50px;
}
#about .titleUnderBar span:first-child{
    font-size: 30px;
}
#about .titleUnderBar span:nth-child(2){
    font-size: 40px;
}
.aboutInner{
    flex-wrap: wrap;
    align-items: stretch;
    color: var(--color-text-title);
}
.aboutInner .flex-centerLeft{
    margin: 70px 0;
}
.aboutInner h3{
    margin: 50px 0 60px 0;
    font-size: 25px;
    font-weight: 600;
}
.aboutInner p{
    margin: 30px 0;
    font-size: 20px;
    font-weight: 500;
}
#aboutInnerImage1{
    width: 120%;
}
#aboutInnerImage2{
    width: 90%;
}
#aboutInnerImage2SP{
    display: none;
    width: 100%;
    margin: 0 0 30px 0;
}

/* ================= feature =================*/
#feature{
    background-color: var(--color-background-backText);
    padding: 35px 0 0 0;
}

#feature .titleBaseCenter span:first-child{
    font-size: 30px;
}
#feature .titleBaseCenter span:nth-child(2){
    font-size: 40px;
}

#feature ul{
    list-style: none;
    padding: 20px 0 180px 0; margin: 0;
    flex-wrap: wrap;
    gap: 20px;
}
#feature ul li{
    width: calc(50% - 10px); height: 230px;
    border-radius: 12.5px;
    background-color: var(--color-background-baseWhite);
    overflow: hidden;
    flex-wrap: nowrap;
    z-index: 1;
}
#feature ul li.animation-custom{
    opacity: 0;
    transition: all 0.3s ease;
    transform:translateY(25px);
    transition-delay: 0.3s;
}
#feature ul li.animation-custom-active{
    opacity: 1;
    transform:translateY(0);
}
.featureImg{
    width: 258px;
}
.featureText{
    display: block;
    position: absolute;
    top: 50%; left: 250px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-title);
    z-index: 2;
    margin-right: 5px;
}
.featureText span{
    display: inline-block;
    color: var(--color-text-white);
    background-color: var(--color-background-strongRed);
    padding: 1px; margin: 2px 0;
    font-weight: 600;
}
.featureLine{
    position: absolute;
    top: -10px; right: 0;
    width: 100px;
    z-index: 1;
}
#featureTriangle1{
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 150px 0 0 50vw;
    border-color: transparent transparent transparent #ffffff;
}
#featureTriangle2{
    position: absolute;
    bottom: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 150px 50vw;
    border-color: transparent transparent #ffffff transparent;
}

/* ================= structure =================*/
#structure{
    margin: 50px 0;
    text-align: center;
}
#structure h2{
    display: inline-block;
    font-size: 50px;
    color: var(--color-text-title);
}
#structure h2 span:first-child{
    font-size: 30px;
}
#structure h2 span:nth-child(2){
    font-size: 40px;
}
#structure .flex{
    align-items: center;
}
#structure .flex6{
    text-align: left;
}
#structureLeft ul li{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 10px;
    margin: 50px 0;
}
#structureLeft ul li img{
    width: 40px;
}
#structureLeft ul li p{
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text-title);
}
#structureLeft ul li p span{
    display: block;
    font-size: 17px;
    font-weight: 500;
}
.structureText{
    margin: 20px 0;
    font-size: 17px;
    color: var(--color-text-title);
}
#structureRight img{
    width: 100%;
}
#structure-image{
    margin: 50px 0;
    width: 100%;
}


/* ================= howto =================*/
#howto{
    width: 100%;
    padding: 40px 0;
    background-color: var(--color-background-whitegray);
}
#howto .titleBaseCenter{
    font-size: 42px;
}
#howto h3{
    font-size: 30px;
    font-weight: 600;
    margin: 20px 0;
    color: var(--color-text-title);
    text-align: center;
}
.howtoStep{
    margin: 60px 0;
    width: 1075px;  height: 281px;
}
.howtoStep:nth-child(odd){
    margin-left: 75px;
}
.howtoStep:nth-child(2){
    margin-left: calc(100% - 1150px);
}
.howtoStep img{
    width: 100%;
    z-index: 2;
    border-radius: 18px;
}

#howtoNotificationOuter{
    margin: 120px 0;
}
#howtoNotificationOuter .mainWidth{
    z-index: 2;
    padding-bottom: 40px;
    background-color: var(--color-background-baseWhite);
    border-radius: 20px;
    overflow: hidden;
    border: solid 3px var(--color-background-gray);
}
#howtoNotificationText{
    padding: 40px 0 125px 0;
    background-color: var(--color-background-gray);
    border-radius:0 0 20px 20px;
}
#howtoNotificationTextInner{
    width: 80%; max-width: 800px;
    margin: 0 auto;
    overflow: visible;
}
#howtoNotificationTextInner h4{
    margin: 5px 0;
    list-style: 1.5;
}
.howtoNotificationRed{
    font-size: 28px;
    padding: 5px 2.5px;
    background-color: var(--color-background-strongRed);
    color: var(--color-text-white);
}
#howtoNotificationTextInner p{
    margin: 10px 0;
    color: var(--color-text-title);
    font-size: 18px;
    font-weight: 500;
}
#howtoNotificationTextInner img{
    position: absolute;
    top: calc(100% - 20px); right: 0;
    width: 100%;
    z-index: 4;
}

.howtoCircle{
    width: 800px; height: 800px;
}
.howtoCircle img{
    width: 100%; height: 100%;
    z-index: 0;
}
#howtoCircle1{
    position: absolute;
    top: 10%; left: -25%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    animation: 50s linear infinite rotationRight;
}
#howtoCircle2{
    position: absolute;
    top: -200px; right: -10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    animation: 50s linear infinite rotationRight;
    animation-direction:reverse;
}
@keyframes rotationRight{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
}


#howtoNotificationTriangle{
    --howtoNotificationTriangleHeight : 150px;
    width: 100%; height: var(--howtoNotificationTriangleHeight);
    background-color: var(--color-background-gray);
}
#howtoNotificationTriangle1{
    position: absolute;
    bottom: 0; left: 15px;;
    width: 0; height: 0;
    border-style: solid;
    border-width: var(--howtoNotificationTriangleHeight) 0 0 calc(50vw - 20px);
    border-color: transparent transparent transparent var(--color-background-baseWhite);
}
#howtoNotificationTriangle2{
    position: absolute;
    bottom: 0; right: 15px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 var(--howtoNotificationTriangleHeight) calc(50vw - 20px);
    border-color: transparent transparent var(--color-background-baseWhite) transparent;
}
#howtoNotificationSquare1{
    position: absolute;
    bottom: 0; right: 0;
    width: 20px; height: var(--howtoNotificationTriangleHeight);
    background-color: var(--color-background-baseWhite);
}
#howtoNotificationSquare2{
    position: absolute;
    bottom: 0; left: 0;
    width: 20px; height: var(--howtoNotificationTriangleHeight);
    background-color: var(--color-background-baseWhite);
}

#howtoNotificationBubble{
    width: 100%; height: 185px;
}
#howtoNotificationBubbleInner{
    position: absolute;
    width: 85%; max-width: 750px;
    height: 220px;
    top: -50px; left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    background-color: var(--color-background-pink);
    border-radius: 20px;
    text-align: center;
}
#howtoNotificationBubbleInner p{
    font-size: 20px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--color-text-title);
    margin: 20px;
}
#howtoNotificationImg{
    width: 90%;
    margin: 0 5%;
}
#howtoNotificationBubbleTriangle{
    position: absolute;
    width: 0; height: 0;
    top: 100%; right: 0; left: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 30px 15px 0 15px;
    border-color: var(--color-background-pink) transparent transparent transparent;

}
#howtoRegistration{
    height: 60px;
}

 
/* ================= syphilis =================*/
#syphilis{
    padding: 150px 0 50px 0;
}
#syphilis h2.titleBaseCenter{
    font-size: 45px;
}
#syphilis h2.titleBaseCenter span:first-child{
    font-size: 35px;
}
#syphilis h2.titleBaseCenter span:nth-child(2){
    font-size: 40px;
}

#syphilisText{
    width: 95%;
    margin: 5px 2.5%;
}
#syphilis .flex4 img{
    width: 100%;
}
#syphilis .flex6 h3, #syphilis .flex6 p{
    padding: 0 50px;
    color: var(--color-text-title);
}
#syphilis .flex6 h3{
    font-size: 26px;
    font-weight: 700;
}
#syphilis .flex6 p{
    font-size: 19px;
    font-weight: 600;
}
#syphilis .flex6 p span{
    color: var(--color-background-strongRed);
}
#syphilisPhase img{
    width: 100%;
    margin: 20px 0;
}
#syphilisPhaseSP{
    display: none;
}


/* ================= syphilisBackground =================*/
#syphilisBackground{
    overflow: hidden;
}
#syphilisBackgroundInner{
    width: 90%; max-width: 900px;
    margin: 100px auto;
    color: var(--color-background-baseWhite);
}
#syphilisBackgroundInner h2{
    font-size: 30px;
    text-align: center;
    margin: 20px 0 60px 0;
    font-weight: 700;
}
#syphilisBackgroundInner h2 span{
    padding-bottom: 15px;
    border-bottom: dashed 3px;
}
#syphilisBackgroundInner p{
    font-size: 21px;
    text-align: center;
    margin: 40px 0;
    line-height: 1.8;
    font-weight: 600;
    text-align: left;
}
#syphilisBackgroundBackground{
    width: 100%; height: 100%;
    z-index: -1;
}
#syphilisBackgroundBackground img{
    width: 100%; height: 100%;
    object-fit: cover;
}



/* ================= price =================*/
#price .titleBaseCenter{
    margin-top: 80px;
}
#priceInner{
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
}
#price img{
    width: 90%;
    margin: 40px 5%;
}

/* ================= voice =================*/
#voice{
    background-color: var(--color-background-pink);
    padding: 80px 0;
}
#voice .titleBaseCenter{
    margin: 0 0 50px 0;
}

.swiper{
    overflow: hidden;
}
.swiper-wrapper{
    white-space: nowrap;
    text-align: center;
}
.swiper-slide{
    display: inline-block;
}

.userVoice{
    width: 100%; height: 330px;
    border-radius: 25px;
    background-color: var(--color-background-baseWhite);
    text-align: left
}
.userVoice p{
    display: -webkit-box;
    width: calc(100% - 90px);
    font-size: 16px;
    white-space:normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
}
.userVoiceTriangle{
    width: 0;   height: 0;
    top: 100%; left: 20px;
    margin-left: 30px;
    border-style: solid;
    border-width: 20px 10px 0 10px;
    border-color: var(--color-background-baseWhite) transparent transparent transparent;
}
.userVoiceUser {
    align-items: center;
    margin-top: 10px;
}
.userVoiceUser img{
    width: 65px; height: 65px;
    border-radius: 32.5px;
}
.userVoiceUser p{
    font-size: 15px;
    font-weight: 600;
    margin-left: 10px;
    color: var(--color-text-title);
}

.swiper-button-next, .swiper-button-prev {
    display: block;
    width: 40px!important; height: 40px!important;
    border-radius: 50%;
    background-color: var(--color-background-gray);
    color: #333333;  
}
.swiper-button-next, .swiper-button-prev {
    --swiper-navigation-color: #333333;
    --swiper-navigation-size: 25px;
}
.swiper-button-next {
    top: 120px!important;;
    right: 2.5px!important;
}
.swiper-button-prev {
    top: 120px!important;;
    left: 2.5px!important;
}

/* ================= note =================*/
#noteInner{
    margin: 40px 0;
    padding: 0  0 20px 0;
}
.noteLists{
    gap: 40px;
    align-items: stretch;
}
.noteList:nth-child(2){
    transition-delay: 0.75s;
}
.noteList:nth-child(3){
    transition-delay: 1s;
}
.noteList a{
    display: block;
    width: 100%; height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--color-background-baseWhite);
    text-decoration: none;
    outline: none;
}
.noteList a:hover,.noteList a:active,.noteList a:focus{
    background-color: var(--color-background-whitegray);

}
.noteList a time,.noteList a h3{
    margin: 15px 10px;
    color: var(--color-text-title);
}
.noteList a time{
    font-size: 15px;
    font-weight: 500;
}
.noteList a h3{
    font-size: 23px;
    font-weight: 500;
}
.noteList img{
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    user-select: none;
}
#linktonote{
    display: block;
    width: 300px; height: 40px;
    border-radius: 30px;
    border: solid 2px var(--color-text-title);
    margin: 30px auto 10px auto;
    color:  var(--color-text-title);
    font-size: 18px;
    font-weight: 600;
    line-height: 40px;
    text-decoration:none;
    text-align: center;
    outline: none;
    transition: all 0.5s ease;
}
#linktonote:hover,#linktonote:active,#linktonote:focus{
    background-color: var(--color-background-baseWhite);
}
#noteBackground{
    position: absolute;
    width: 100%; height: calc(100% - 100px);
    left: 0; bottom: 0;
    z-index: -1;
    background-color: var(--color-background-skyBlue);   
}



/* ================= faq =================*/
#faq ul{
    margin: 0 0 120px 0;
}
#faq ul li{
    margin: 0 0 20px 0;
}
.question{
    width: 100%;
    padding: 10px 0;
    border-radius: 2.5px;
    background-color: var(--color-background-pink);
    color: var(--color-text-title);
}
.question, .answer{
    align-items: center;
}
.answer{
    margin-top: 10px;
}
.questionTitle, .answerTitle{
    width: 45px; height: 45px;
    margin-left: 30px;
    border-radius: 22.5px;
    line-height: 45px;
    font-size: 20px;
    font-weight: 600;
    background-color: var(--color-background-baseWhite);
    text-align: center;
}
.questionText,.answerText{
    font-size: 19.5px;
    margin-left: 20px;
    margin-right: 20px;
    flex: 1;
}
.questionText{
    font-weight: 600;
}
.answerText{
    font-weight: 500;
}


/* ================= message =================*/
#messageInner{
    overflow: hidden;
}
#messageText{
    margin: 160px 10px 160px 50px;
}
#messageText p{
    margin: 40px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-white);
    line-height: 1.7;
}
#messageImage{
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
}
#messageCircle{
    position: absolute;
    width: calc(100% + 30px);
    aspect-ratio: 1 / 1;
    top: 50%; left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--color-background-baseWhite);
    z-index: 1;
}
#messageRecommend{
    width: 90%;
    margin: auto auto auto 10%;
    z-index: 2;
}
#messageRecommend div p{
    font-size: 26px;
    font-weight: 600;
    color: var(--color-text-title);
    line-height: 1.5;
}
#messageRecommend div{
    width: 70%;
    margin: 0 30% 0 0;
}
#messageRecommend div a{
    display: block;
}
#messageRecommend img{
    position: absolute;
    width: 140px;
    top: 50%; right: 5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

/* ================= contact =================*/
#contact{
    padding: 80px 0 120px 0;
    text-align: center;
}
#contact p{
    font-size: 18px;
    color: var(--color-text-title);
}
#contact .flex{
    gap: 20px;
}
#contact .flex a{
    width: 320px; height: 70px;
    border-radius: 12.5px;
    border: solid 2px var(--color-text-title);
    line-height: 70px;
    font-size: 19px;
    outline: none;
    text-decoration: none;
    color: var(--color-text-title);
}
#contact .flex a:hover{
    background-color: var(--color-background-whitegray);
}

/* ================= footer =================*/
footer{
    width: 100%;
    padding: 40px 0;
    background-color: var(--color-background-backText);
}
#footerInner{
    width: 400px;
    padding: 20px 5px;
    margin: 0 auto;
    background-color: var(--color-background-baseWhite);
    overflow: hidden;
    border-radius: 12.5px;
}
#footerInner div{
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-title);
}
#footerInner img{
    width: 100px;
    margin-left: 10px;
    padding-bottom: 12.5px;
}





@media (max-width : 1600px) , print {
    /* ================= message =================*/
    #messageRecommend img{
        width: 140px;
    }
}
@media (max-width : 1400px) , print {
    /* ================= header =================*/
    #headerInner nav ul a{
        min-width: 120px;
    }

    /* ================= headTitle =================*/
    #headTitle-left-inner h1{
        font-size: 60px;
        margin-left: -10px;
    }
    #headTitle-left-inner .tbOnly{
        display: block;
    }
    #headTitle-img{
        width: 300px;
        padding-top: 200px;
    }

    /* ================= feature =================*/
     .featureText{
        left:210px;
        font-size: 20px;
    }
    .featureImg{
        width: 200px;
    }

    /* ================= message =================*/
    #messageRecommend img{
        width: 100px;
    }
}
@media (max-width : 1350px) , print {
    /* ================= howto =================*/
    .howtoStep{
        margin: 60px 0;
        width: 950px;  height: 248px;
    }
    .howtoStep:nth-child(odd){
        margin-left: 15px;
    }
    .howtoStep:nth-child(2){
        margin-left: calc(100% - 965px);
    }

}
@media (max-width : 1300px) , print {
    /* ================= header =================*/
    #headerInner nav{
        margin-left: 20px;
    }
    header .startButton{
        width: 200px;
        font-size: 15px;
    }
    #headerInner nav ul a{
        min-width: 100px;
    }
    #headerInner nav ul a span:first-child{
        font-size: 18px;
    }
    #headerInner nav ul a span:last-child{
        font-size: 13px;
    }

    /* ================= headTitle =================*/
    #headTitle-right img{
        object-position: center center;
    }

    /* ================= about =================*/
    #aboutInnerImage1{
        width: 100%;
    }


    /* ================= message =================*/
    #messageRecommend img{
        display: none;
    }
    #messageRecommend div {
        width: 80%;
        margin: 0 15% 0 5%;
    }
}
@media (max-width : 1200px) , print {
    /* 登録 */
    .EncourageRegistrationInner img{
        width: 140px;
        padding-right: 50px;
    }
}
@media (max-width : 1150px) , print {
    /* ================= feature =================*/
    .featureText{
        left:170px;
    }
    .featureImg{
        width: 170px;
    }
}
@media (max-width : 1100px) , print {
    /* ================= howto =================*/
    .howtoStep{
        margin: 50px 0;
        width: 800px;  height: 222px;
    }
    .howtoStep:nth-child(odd){
        margin-left: 30px;
    }
    .howtoStep:nth-child(2){
        margin-left: calc(100% - 830px);
    }
    #howtoNotificationTriangle{
        --howtoNotificationTriangleHeight : 120px;
    }
}
@media (max-width : 1050px) , print {
    /* ================= header =================*/
    #headerInner nav{
        display: none;
    }

    /* ================= headTitle =================*/
    #headTitle-top .flex5:first-child{
        width: 65%;
    }
    #headTitle-top .flex5:last-child{
        width: 35%;
    }
    .howtoCircle {
        width: 600px; height: 600px;
    }
    #headTitle-left-inner img{
        width: 70%;
    }

    /* ================= feature =================*/
    #feature ul li{
        height: 200px;
    }
    .featureText{
        left:124px;
    }
    .featureImg{
        margin-left: 2px;
        width: 120px;
        height: 120px;
        object-fit: cover;
    }
    #feature .spcNone{
        display: none;
    }
}
@media (max-width : 1000px) , print {
    /* ================= headTitle =================*/
    #headTitle-top{
        height: 720px;
    }
    #headTitle-img{
        padding-top: 200px;
    }

    /* ================= structure =================*/
    #structure .tbNone{
        display: none;
    }

    /* ================= syphilis =================*/
    #syphilis .tbNone{
        display: none;
    }


    /* ================= message =================*/
    #message .tbOnly{
        display: block;
    }
    #messageRecommend div p{
        font-size: 24px;
    }
    #messageRecommend div a{
        width: 200px;
        margin-left: 5px;
    }
    #messageRecommend div{
        width: 85%;
        margin: 0 8% 0 7%;
    }

}
@media (max-width : 950px) , print {
    /* 登録 */
    .EncourageRegistrationInner img{
        width: 120px;
        padding-right: 25px;
    }

    /* ================= howto =================*/
    .howtoStep{
        margin: 20px 0;
        width: 700px;  height: 222px;
    }
    .howtoStep:nth-child(odd){
        margin-left: 30px;
    }
    .howtoStep:nth-child(2){
        margin-left: calc(100% - 730px);
    }
    #howtoCircle2{
        top: -100px;
    }
    #howtoNotificationTriangle{
        --howtoNotificationTriangleHeight : 110px;
    }
    
}
@media (max-width : 900px) , print {
    /* ================= headTitle =================*/
    #headTitle-bottom-image{
        width: 100%;
    }
    #headTitle-img{
        width: 240px;
        padding-top: 250px;
    }
    #headTitle-left-inner h1{
        font-size: 50px;
    }
    
    /* ================= feature =================*/
    #feature .tbNone{
        display: none;
    }

    /* ================= note =================*/
    #note  .noteList:last-child{
        display: none;
    }
    #note .flex31{
        width: 50%;
    }
}
@media (max-width : 850px) , print {
    /* 登録 */
    .EncourageRegistrationInner{
        text-align: left;
    }
    .EncourageRegistrationInner a{
        margin-left: 30px;
    }


    /* ================= howto =================*/
    .howtoStep{
        margin: 20px 0;
        width: 100%; height: auto;
        aspect-ratio: 1075/280;
    }
    .howtoStep:nth-child(odd){
        margin-left: 0;
    }
    .howtoStep:nth-child(2){
        margin-left: 0;    
    }
    .howtoCircle {
        width: 400px; height: 400px;
    }
    #howtoNotificationText{
        padding: 40px 0 150px 0;
    }
    #howtoNotificationTextInner p{
        font-size: 15px;
    }
    #howtoNotificationTextInner img{
        top: 100%;
    }
    #howtoNotificationTriangle{
        --howtoNotificationTriangleHeight : 80px;
    }
}
@media (max-width : 800px) , print {
    #headTitle-left-inner p{
        font-size: 23px;
    }
    /* ================= message =================*/
    #messageRecommend div p{
        font-size: 20px;
    }
    #messageRecommend div a{
        width: 180px;
    }

}
@media (max-width : 740px) , print{
    #headTitle-left-inner p{
        font-size: 21px;
    }
}
@media (max-width : 700px) , print{
    /* 登録 */
    .EncourageRegistrationInner .spOnly{
       display: block;
    }
    .EncourageRegistrationInner p{
        margin-left: 7.5%;
    }

        
    /* ================= header =================*/
    header{
        width: 100%; height: var(--header-heightSP);
    }
    #headerBackground{
        border-radius: 0;
    }
    #headerLogo{
        width: 100px; height: 100px;
        margin: 0;
    }
    #headerInner .startButton{
        top: 25px;
    }

    /* ================= headTitle =================*/
    #headTitle .spOnly{
        display: block;
    }
    #headTitle .spNone{
        display: none;
    }
    #headTitle-top{
        height: auto;
        flex-wrap: wrap;
    }
    #headTitle-top .flex5{
        width: 100%;
    }
    #headTitleUpperSP{
        width: 100%; height: 240px;
    }
    #headTitleUpperSP img{
        width: 100%; height: 100%;
        object-fit: cover;
    }
    #headTitle-left{
        position: static;
        width: 92.5%; height: auto;
        max-width: var(--maxWeight);
        margin: 0 auto;
    }
    #headTitle-left-inner{
        position: static;
        width: 100%; height: auto;
    }
    #headTitle-left-inner img{
        display: block;
        width: 96%;
        max-width: 400px;
        margin: 10px auto 5px auto;
    }
    #headTitle-left-inner h1{
        margin: 10px 0;
        margin-left: 2.5px;
        font-size: 40px;
        text-align: center;
    }
    #headTitle-left-inner p{
        margin: 30px 0 10px 0;
        text-align: center;
        font-size: 24px;
    }
    #headTitle-img{
        position: static;
        padding: 0;
        width: 250px;
        margin: 0px auto 80px auto;
        transform: none;
    }
    #headTitle-bottom-inner .flex5{
        width: 100%;
    }



    /* ================= feature =================*/
    #feature ul li{
        width: 100%; height: 160px;
    }


    /* ================= structure =================*/
    #structure .flex{
        flex-wrap: wrap;
    }
    #structure .flex6,#structure .flex4{
        width: 100%;
    }
    #structureRight img{
        max-width: 450px;
    }
    #structure .spNone{
        display: none;
    }
    #structure .spOnly{
        display: inline-block;
    }
    #structure-image{
        margin: 10px 0 50px 0;
    }

    /* ================= syphilis =================*/
    #syphilis .spNone{
        display: none;
    }
    #syphilis .spOnly{
        display: block;
    }
    #syphilis .titleBaseCenter{
        margin: 80px 0 10px 0;
    }
    #syphilis .flex{
        flex-wrap: wrap;
    }
    #syphilis .flex6{
        width: 100%;
    }
    #syphilis .flex6 h3, #syphilis .flex6 p{
        padding: 0;
    }
    #syphilis .flex6 h3{
        margin: 5px 0;
        font-size: 24px;
    }
    #syphilis .flex6 p{
        margin: 20px 0;
        font-size: 16px;
    }
    #syphilisGraphSP{
        width: 100%;
        max-width: 400px;
        margin: 10px auto 20px auto;
    }
    #syphilisPhasePC{
       display: none;
    }
    #syphilisPhaseSP{
        display: block;
     }


    /* ================= syphilisBackground =================*/
    #syphilisBackgroundInner p{
        font-size: 18px;
    }

}

@media (max-width : 650px) , print {
    .titleUnderBar{
        padding: 0 15px;
    }
    /* ================= message =================*/
    #message .flex{
        flex-wrap: wrap;
    }
    #message .flex6, #message .flex4{
        width: 100%;
    }
    #messageText{
        width: 90%;
        margin: 100px auto 60px auto;
    }
    #messageCircle{
        width: 400px;
        top: auto; bottom: -150px;
        right: -115px; left: auto;
        transform: none;
        opacity: 0.9;
    }
    #messageRecommend{
        width: 300px;
        margin: auto 0 20px calc(100% - 300px) ;
    }
    #messageRecommend div{
        margin: 0 15px 0 calc(15% - 15px);
    }
    #messageRecommend div p{
        text-align: right;
    }
    #messageRecommend div a{
        width: 100%;
        margin: 0;
    }

}

@media (max-width : 600px) , print{
    /* ================= about =================*/
    #about .flex6, #about .flex4, #about .flex5{
        width: 100%;
    }   
    #about img{
        position: static;
        transform: none;
    }
    #aboutInner1, #aboutInner2{
        margin: 15px 0;
    }
    #aboutInnerImage2{
        display: none;
    }
    #aboutInnerImage2SP{
        display: block;
    }
    #about .spNone{
        display: none;
    }


    /* ================= howto =================*/
    .howtoCircle {
        width: 300px; height: 300px;
    }
    #howtoNotificationTriangle{
        display: none;
    }
    #howtoNotificationTextInner p{
        font-size: 14px;
    }
    #howtoNotificationBubbleInner p{
        font-size: 16px;
    }
    #howtoNotificationBubbleInner p br:last-child{
        display: none;
    }
    .howtoNotificationRed{
        font-size: 24px;
    }
    #howtoNotificationImgOuter{
        overflow-x: scroll;
        overflow-y: hidden;
        padding: 0 0 15px 0;
    }
    #howtoNotificationImg{
        width: 600px;
    }

    /* ================= price =================*/
    #price .mainWidth{
        width: 100%;
        margin: 0;
    }
    #priceScroll{
        overflow-x: scroll;
        overflow-y: hidden;
    }
    #priceInner{
        margin: 10px 0;
        width: 900px;
    }

    /* ================= note =================*/
    #note  .noteList:last-child{
        display: flex;
    }
    #note .flex{
        flex-wrap: wrap;
    }
    #note .flex31{
        width: 100%;
    }
}

@media (max-width : 550px) {
    /* 登録 */
    .EncourageRegistrationInner{
        border-radius: 40px;
    }
    .EncourageRegistrationInner p{
        font-size: 25px;
        margin-left:10%;
    }
    .EncourageRegistrationInner a{
        width: calc(100% - 60px);
    }
    .EncourageRegistrationInner img {
        width: 120px;
        padding-right: 40px;
        padding-bottom: 190px;
    }
    .EncourageRegistration .spOnly2{
        display: block;
    }
}

@media (max-width : 500px) {
    footer #footerInner{
        width: 300px;
    }
    footer #footerInner div{
        font-size: 15px;
    }
    footer #footerInner img{
        width: 80px;
    }
}

@media (max-width : 450px) {
    .EncourageRegistrationInner img {
        padding-right: 20px;
    }
}

@media (max-width : 400px) {
    .EncourageRegistrationInner img {
        width: 100px;
        padding-bottom: 150px;
    }
}
@media (max-width : 360px) {
    .EncourageRegistrationInner img {
        width: 80px;
        padding-bottom: 130px;
    }
}

@media print {
    #headTitle-left{
        margin: 0 auto!important;
    }
    #headTitle-bottom{
        display: none;
    }

    #howtoNotificationBubble{
        height: 250px;
    }
    #howtoNotificationBubbleInner{
        top: 50px;
    }
    #howtoNotificationImg{
        width: 90%;
        margin: 0 5%;
    }

    #syphilisPhase img{
        width: 100%;
    }

    .startButton{
        display: none;
    }
}