@charset "UTF-8";
/* CSS Document */
/* 基本-モバイルファースト ======================================================================================================== */

#page_menu{
width: 100%;
background-color: #f3f3f3;
position: sticky;
top: 70px;
left: 0;
z-index: 10000;
}
#page_menu ul{
display: flex;
flex-wrap: wrap;
}
#page_menu li:nth-child(1){
width: 50%;
}
#page_menu li:nth-child(n+2){
width: 25%;
}
#page_menu li a{
display: flex;
align-items: center;
justify-content: center;
height: 40px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
}
.top#page_menu li.top a,
.kaitori#page_menu li.kaitori a,
.flow#page_menu li.flow a,
.sumikae#page_menu li.sumikae a,
.problem#page_menu li.problem a,
.qa#page_menu li.qa a,
.jirei#page_menu li.jirei a{
background-color: #b3203a;
color: #fff;
}
#page_menu li:nth-child(1) a,
#page_menu li:nth-child(4) a{
border-left: none;
}




#common_form_btn{
width: 100%;
height: 60px;
position: fixed;
right: 0;
bottom: 0;
z-index: 11111;
transition: .5s;
}
#common_form_btn.hide {
transform:translateY(60px);
}
#common_form_btn a{
display: flex;
align-items: center;
justify-content: center;
height: 60px;
font-weight: bold;
background-color: #b3203a;
color: #fff;
border-top: solid 1px #fff;
}
#common_form_btn a .icon{
margin-right: 5px;
}
#common_form_btn a .icon img{
height: 20px;
}
#common_form_btn a p{
font-size: 16px;
}





/* 共通メイン部分 */
#common_main_title{
}
#common_main_title .text{
width: 90%;
margin-top: -15vw;
margin-left: auto;
background-color: #f7e8eb;
padding: 20vw 5vw 10vw;
text-align: left;
position: relative;
z-index: 5;
overflow: hidden;
}
#common_main_title .text h2{
font-size: 8vw;
font-weight: bold;
position: relative;
z-index: 3;
}
#common_main_title .text em{
display: block;
font-size: 5vw;
font-weight: bold;
}
#common_main_title .text .en{
color: #fff;
font-size: 9.5vw;
font-weight: bold;
white-space: nowrap;
position: absolute;
top: 10vw;
right: -.1em;
z-index: 1;
}

#common_main_title .p01{
width: 80%;
position: relative;
z-index: 10;
}
#common_main_title .p02{
width: 50%;
margin-right: 5vw;
margin-top: -5vw;
margin-left: auto;
position: relative;
z-index: 10;
}


.common_woman_voice{
text-align: center;
}
.common_woman_voice .photo{
width: 110px;
margin: 0 auto 10px;
}
.common_woman_voice .text{
display: inline-block;
font-weight: bold;
position: relative;
}
.common_woman_voice .text::before,
.common_woman_voice .text::after{
content: "";
display: block;
width: 2px;
height: 100%;
max-height: 20vw;
background-color: #111;
position: absolute;
bottom: 0;
margin: auto 0;
}
.common_woman_voice .text::before{
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
left: -3vw;
}
.common_woman_voice .text::after{
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
right: -3vw;
}

/* スマホのみ======================================================================================================== */
@media screen and (max-width: 750px){

#page_menu ul{
margin: 0;
text-align: center;
}
}



/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){

#page_menu{
top: 120px;
transition: all 0.2s ease;
}
#page_menu::before{
content: "";
display: block;
width: 100%;
height: 120px;
background-color: #fff;
position: absolute;
top: -120px;
left: 0;
}
.scroll#page_menu{
top: 90px;
}
#page_menu ul{
}
#page_menu li{
width: 14.28571429% !important;
}
#page_menu li a{
height: 60px;
border-top: none;
}
#page_menu li:nth-child(1) a,
#page_menu li:nth-child(4) a{
border-left: 2px solid #fff;
}
#page_menu li:last-child a{
border-right: 2px solid #fff;
}
#page_menu li a:hover{
background-color: #b3203a;
color: #fff;
}

#common_form_btn{
width: 60px;
height: 200px;
bottom: inherit;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: auto 0;
}
#common_form_btn.hide {
transform: translateX(60px) translateY(-50%);
-webkit-transform: translateX(60px) translateY(-50%);
}
#common_form_btn a{
flex-direction: column;
width: 60px;
height: 200px;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
}
#common_form_btn a p{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}


#container{
font-size: 16px;
}




#common_main_title{
position: relative;
padding-top: 5vw;
}
#common_main_title .text{
width: 60%;
margin-top: 0;
margin-left: auto;
padding: 5vw 7vw 5vw 17vw;
}
#common_main_title .text h2{
font-size: 3vw;
margin-bottom: 1vw;
}
#common_main_title .text em{
font-size: 2vw;
margin-bottom: 1vw;
}
#common_main_title .text p{
font-size: 1.1vw;
}
#common_main_title .text .en{
font-size: 6vw;
top: -2.5vw;
right: -.12em;
}
#common_main_title .p01{
width: 50%;
position: absolute;
top: 0;
left: 0;
}
#common_main_title .p02{
width: 20%;
margin-right: 3vw;
margin-top: -3vw;
margin-left: auto;
position: relative;
z-index: 10;
}
#common_main_title .p01 img,
#common_main_title .p02 img{
width: 100%;
}

.common_woman_voice{
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
}
.common_woman_voice .photo{
margin: 0;
margin-right: 20px;
}
.common_woman_voice .text{
text-align: left;
padding: 10px 0px 10px 40px;
}
.common_woman_voice .text::before,
.common_woman_voice .text::after{
width: 60px;
height: 2px;
}
.common_woman_voice .text::before{
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
bottom: inherit;
top: 0;
left: 0;
}
.common_woman_voice .text::after{
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
right: inherit;
left: 0;
}




form th{
width: 220px;
}


}