@charset "utf-8";
@import url("root.css");

/***************************************
---------------- メニュー ----------------
***************************************/
.oxygen {
    margin: 50px auto 40px;
    width: 100%;
}
.oxygen_top_txt p{
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height:2;
    padding: 60px 0;
text-align: center;
}

.oxygen_onayami{
margin: 50px auto;
padding: 0;
}

.oxygen_onayami ul{
    font-size: 16px;
    list-style: none;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.oxygen_onayami li {
width: 32%;
margin: 0 0 1% 0;
    font-size: 20px;
    padding:10px 10px 10px 0;
    text-indent: 1em;
    font-weight: 700;
    background-color: var(--base-color01);
    border-radius: 10px;
    color: var(--base-color_w);
    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.oxygen_onayami li:before {
    content: '\f06a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 0;
    color: var(--base-color_w);
}

.oxygen_osusume{
margin: 50px auto;
padding: 0;
}

.oxygen_onayami dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.oxygen_onayami dd{
width: 48%;
margin: 0 2% 2% 0;
border-radius: 10px;
background-color: var(--sub-color00);
padding:20px 40px;
}

.oxygen_onayami dd:nth-child(2n){
width: 48%;
margin: 0 0 2% 0;
}



.point_title {
	font-size: 44px;
    font-weight: 900;
    text-align: center;
    color: var(--base-color01);

    padding: 0 0 5px 0;
}

.point_title span {
	font-size: 20px;
    font-weight: 400;
    color: var(--base-color_b);
}


.point_no {
	font-size: 30px;
    font-weight: bold;
}

.point_no_big {
	font-size: 36px;
    font-weight: bold;
    color: var(--base-color01);
    padding: 0;
}


.point_no span {
	display: flex;
	align-items: center;
	color: var(--base-color01);
	font-size: 30px;
	text-transform: uppercase;
}

.point_no span::before {
	content: '';
	display: inline-block;
	margin-right: 20px;
	width: 40px;
	height: 2px;
	background-color: var(--base-color01);
}




.oxygen_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:40px auto 40px;
}

.oxygen_box_s {

padding: 0 0 100px 0;
}

.oxygen_txt {
width: 52%;
margin: 0 auto 20px;
padding:50px 50px;
}

.oxygen_txt img{
width: 100%;
}


.oxygen_txt p{
padding: 20px 0;
}

.oxygen_img {
width: 48%;
background: url("../img/oxygen/img_01.jpg") bottom center no-repeat;
background-size: cover;
}

.oxygen_subtitle {
font-family: "ten-mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    line-height: 1.2;
    padding: 20px 0;
}



.oxygen_img img{width: 100%;}
.oxygen_txt_02 {width: 50%;padding: 0 0 0 0;}
.oxygen_img_02 { width: 45%;margin: 0 0 0 0;}
.oxygen_img_02:nth-child(2n) { width: 45%;margin: 0 0 0 0;}
.oxygen_img_02 img {width:100%;padding: 0 0 0 0;}
.oxygen_img_02 a img:hover {	opacity: 0.5 ;transition: 0.4s;}
.oxygen_txt_02 p{padding: 40px 0 0 0;}
.oxygen_hikaku{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 40px auto 100px;
    width: 100%;
}
.oxygen_img_hikaku { width: 40%;margin: 0 0 0 0;}
.oxygen_img_hikaku02 {
width: 10%;
margin: 0 0 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.oxygen_img_hikaku02 i {font-size: 50px;color: var(--base-color01);}
.oxygen_img_hikaku img { width: 100%;margin:0 auto;}

.oxygen_img_hikaku dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
}

.oxygen_img_hikaku dd{
width: 50%;

}
.oxygen_img_hikaku ul{
font-size: 16px;
list-style: none;
margin: 10px auto;
}

.oxygen_img_hikaku li {
padding: 0 0 5px 0;
font-size: 18px;
padding-left: 20px;
text-indent: -1em;
font-weight: 700;
}

.oxygen_img_hikaku li:before {
    content: '\f06a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    color: var(--base-color01);
}

.oxygen_before{
background-color: #b4dfff;
text-align: center;
font-size: 24px;
margin: 0 auto 40px;
}

.oxygen_after{
background-color: #ffb4b4;
text-align: center;
font-size: 24px;
margin: 0 auto 40px;
}

.oxygen_shop{
background-color: #cc0000;
color: #ffffff;
border-radius: 50px;
font-size: 14px;
text-align: center;
font-weight: bold;
line-height: 1.4;
margin: 0 0 0 20px;
display: block;
padding: 10px 20px;
}

.menu_box_02 {
    background-color: var(--sub-color02);
    padding: 40px 80px 30px 80px;
    margin: 0 auto 20px;

    border:1px solid var(--base-color01);
}
.menu_box_02 ul {
    font-size: 16px;
    list-style: none;
    margin: 10px auto;
}

.menu_box_02 li {
    padding: 0 0 5px 0;
    font-size: 18px;
    padding-left: 20px;
    text-indent: -1em;
    font-weight: 700;
}

.menu_box_02 li:before {
    content: '\f06a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    color: var(--base-color01);
}

.staff_box_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    margin: 40px auto 60px;
    background: url(../img/about_bg.png) bottom left no-repeat;
    background-size: cover;
}

.staff_txt {
width: 52%;
margin: 0 auto 20px;
    padding: 40px;
    }
.staff_txt p{

    padding: 40px 0;
    }
    
.staff_img {
width: 48%;
background: url("../img/oxygen/img_01.jpg") bottom center no-repeat;
background-size: cover;
}

.oxygen_qa_box{
margin: 50px auto;
}

.oxygen_q{
margin: 20px auto;
padding: 0 0 5px 0;
border-bottom: 3px solid var(--base-color_b);
position: relative;
font-weight: 700;
font-size: 18px;
}
.oxygen_q span{
color:  var(--base-color01);
font-size: 110%;
padding: 0 10px 0 10px;
}

.oxygen_q:before {
position: absolute;
    content: '';
    width: 3%;
    left: 0;
    bottom: -3px;
    border-bottom: 3px solid var(--base-color01);
}

.oxygen_qa_box p{
padding: 0 40px 20px 40px;
}




@media screen and (max-width: 768px) {
.oxygen {
    margin: 20px auto 0;
    width: 100%;
}

.oxygen_top_txt p{
margin: 0 auto 0;
    text-align: left;
    font-size: 16px;
    padding: 10px 0;
    text-align: justify;
}

.oxygen_onayami{
margin: 20px auto;
padding: 0;
}

.oxygen_onayami ul{
    font-size: 16px;
    list-style: none;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-items: stretch;
}

.oxygen_onayami li {
        width: 49%;
        margin: 0 0 1% 0;
        font-size: 14px;
        padding: 5px 10px 5px 10px;
        text-indent: .5em;
        font-weight: 700;
        background-color: var(--base-color01);
        border-radius: 10px;
        color: var(--base-color_w);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        display: inline-block;
}

.oxygen_onayami li:before {
content: '\f06a';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 5px;
        color: var(--base-color_w);
}

.oxygen_osusume{
margin: 20px auto;
padding: 0;
}

.oxygen_onayami dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.oxygen_onayami dd{
width: 100%;
margin: 0 0 4% 0;
border-radius: 10px;
background-color: var(--sub-color00);
padding:20px 20px;
}

.oxygen_onayami dd:nth-child(2n){
width: 100%;
margin: 0 0 4% 0;
}


.point_title {
	font-size: 24px;
    font-weight: 900;
    text-align: center;
    color: var(--base-color01);

    padding: 0 0 5px 0;
}

.point_title span {
	font-size: 16px;
    font-weight: 400;
    color: var(--base-color_b);
}


.point_no {
	font-size: 30px;
    font-weight: bold;
}

.point_no_big {
	font-size: 36px;
    font-weight: bold;
    color: var(--base-color01);
    padding: 0;
}


.point_no span {
	display: flex;
	align-items: center;
	color: var(--base-color01);
	font-size: 30px;
	text-transform: uppercase;
}

.point_no span::before {
	content: '';
	display: inline-block;
	margin-right: 20px;
	width: 40px;
	height: 2px;
	background-color: var(--base-color01);
}






.oxygen_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin:40px auto 40px;
}

.oxygen_box_s {
padding: 0 0 50px 0;
}

.oxygen_txt {
width:100%;
margin: 0 auto 0;
padding:10px 0;
}

.oxygen_txt img{
width: 100%;
}

.oxygen_txt p{
padding: 20px 0;
}

.oxygen_img {
width: 100%;
margin: 0 auto 0;
padding: 20px;
 
}
.menu_box_02 {
    background-color: var(--sub-color02);
    padding: 20px 20px 10px 20px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border:1px solid var(--base-color01);;
}
.menu_txtbig {
    font-size: 100%;
    color: var(--base-color01);
    font-weight: 700;
}

.oxygen_txt_02 {width: 100%;padding:0;}
.oxygen_img_02 { width: 100%;margin:0 auto;}
.oxygen_img_02:nth-child(2n) { width: 100%;margin:20px auto;}
.oxygen_img_02 img {width:100%;padding: 0 0 0 0;}
.oxygen_img_02 a img:hover {	opacity: 0.5 ;transition: 0.4s;}
.oxygen_txt_02 p{padding: 40px 0 0 0;}

.oxygen_txt_02 p {width: 100%;padding:10px 0;}


.staff_box_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    margin: 20px auto 20px;
    background: url(../img/about_bg.png) bottom left no-repeat;
    background-size: cover;
}

.greeting_txt_b {
    color: #ffffff;
    background-color: var(--base-color01);
    width: 60px;
    font-size: 18px;
    text-align: center;
    margin: 20px 0 10px 0;
}
.staff_txt {
width: 100%;
margin: 0 auto 20px;
    padding:20px;
    }
.staff_img {
width: 100%;
background: url("") bottom center no-repeat;
background-size: cover;
}

.staff_subtitle {
font-family: "ten-mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    line-height: 1.2;
    padding: 20px 0;
}


.massage_onayami dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px auto;
}



.staff_txt p{

    padding: 40px 0 0 0;
    }
}

/***************************************
-------------- CONTACT --------------
***************************************/

.voice{
width:1200px;
margin:40px auto 40px;
padding:0;
}

.voice_txt p{
margin:40px auto 40px;
padding:0;
text-align: center;
}


.voice_row{
width:1200px;
margin:40px auto 0;
padding:0;
display: flex;
flex-wrap: wrap;
align-items:flex-start;
justify-content: space-between;
}

.voice_col{
width:250px;
margin:0 66px 50px 0;
padding:0;

}

.voice_col:nth-child(4n){
width:250px;
margin:0;
padding:0;

}
.voice_txt_a{
background-color: #fff9ec;
width: 100%;
padding: 20px;
}

.text2 {
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 4; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}

.voice_txt_a p{
font-size: 14px;
}

.voice_txt_a ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 5px 0;
}

.voice_txt_a li{
font-size: 12px;
padding:0 10px;
margin: 0 10px 0 0;
}

.v_01{
background-color: #ffffff;
color: #d28cff;
border: 1px solid #d28cff;
}

.v_02{
background-color: #ffffff;
color: #8bd375;
border: 1px solid #8bd375;
}

.v_03{
background-color: #ffffff;
color: #ff8cac;
border: 1px solid #ff8cac;
}

.voice_title{
font-size: 14px;
font-size: 700;
padding:5px 0;
margin: 0 0 10px 0;
color: var(--base-color01);
border-bottom: 3px solid var(--base-color01);
}

.voice_txt_b p{
font-size: 14px;
padding:0;
margin:0;
line-height: 1.4;
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 7; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}

.voice_link{
margin:50px 0 0 auto;
width: 262px;

}

.detail_txt{
margin:20px 0 0 auto;
width: 100%;
}

.voice_d{
background-color: #fff9ec;
width: 100%;
padding: 20px;
margin: 40px auto;
}



.voice_d p{
font-size: 16px;
}

.voice_d ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 5px 0;
}

.voice_d li{
font-size: 12px;
padding:0 10px;
margin: 0 10px 0 0;
}


.voice_title_d{
font-size: 16px;
font-size: 700;
padding:5px 0;
margin: 0 0 10px 0;
color: var(--base-color01);
border-bottom: 3px solid var(--base-color01);
}

.voice_txt_d p{
font-size: 16px;
padding:0;
margin:20px auto;
line-height: 1.4;

}

.voice_link{
    margin: 0 0 0 auto;
    width: 220px;
}


@media screen and (max-width: 768px) {

.voice{
width:100%;
margin:20px auto 20px;
padding:0;
display: flex;
flex-wrap: wrap;
align-items:flex-start;
justify-content: space-between;
}

.voice_txt p{
margin:10px auto 10px;
padding:0;
text-align: left;
}

.voice_row{
width:100%;
margin:20px auto 0;
padding:0;
display: flex;
flex-wrap: wrap;
align-items:flex-start;
justify-content: space-between;
}

.voice_col{
width:47%;
margin:0 3% 5% 0;
padding:0;

}
.voice_col:nth-child(2n){
margin:0 0 5% 0;
padding:0;
}

.voice_col:nth-child(4n){
width:47%;
margin:0 0 5% 0;
padding:0;
}

.voice_txt_a{
background-color: #fff9ec;
width: 100%;
padding: 10px;
}

.text2 {
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 4; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}

.voice_txt_a p{
font-size: 14px;
}

.voice_txt_a ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 5px 0;
}

.voice_txt_a li{
font-size: 12px;
padding:0 5px;
margin: 0 5px 0 0;
}

.v_01{
background-color: #ffffff;
color: #d28cff;
border: 1px solid #d28cff;
}

.v_02{
background-color: #ffffff;
color: #8bd375;
border: 1px solid #8bd375;
}

.v_03{
background-color: #ffffff;
color: #ff8cac;
border: 1px solid #ff8cac;
}

.voice_title{
font-size: 14px;
font-size: 700;
padding:5px 0;
margin: 0 0 10px 0;
color: var(--base-color01);
border-bottom: 3px solid var(--base-color01);
}

.voice_txt_b p{
font-size: 14px;
padding:0;
margin:0;
line-height: 1.4;
    display: -webkit-box; /* 必須 */
    -webkit-box-orient: vertical; /* 必須 */
    -webkit-line-clamp: 7; /* 行数を制限 */
    overflow: hidden; /* はみ出た部分を非表示 */
}


.voice_link{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin:10px auto 0;
padding: 0;

}

.link_top a {
    border: 1px solid var(--base-color_b);
    padding: 10px 20px 10px 10px;
    font-size: 14px;
    color: var(--base-color_b);
    margin: 10px auto 0;
    display: block;
    position: relative;
    text-align: center;
    width: 100%;
}

.detail_txt{
margin:20px 0 0 auto;
width: 100%;
}

.voice_d{
background-color: #fff9ec;
width: 100%;
padding: 20px;
margin: 20px auto;
}



.voice_d p{
font-size: 16px;
}

.voice_d ul{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 5px 0;
}

.voice_d li{
font-size: 12px;
padding:0 10px;
margin: 0 10px 0 0;
}


.voice_title_d{
font-size: 16px;
font-size: 700;
padding:5px 0;
margin: 0 0 10px 0;
color: var(--base-color01);
border-bottom: 3px solid var(--base-color01);
}

.voice_txt_d p{
font-size: 16px;
padding:0;
margin:20px auto;
line-height: 1.4;

}

.oxygen_qa_box{
margin: 20px auto;
}

.oxygen_q span{
padding: 0 10px 0 0;
}

.oxygen_q:before {
position: absolute;
    content: '';
    width: 3%;
    left: 0;
    bottom: -3px;
    border-bottom: 3px solid var(--base-color01);
}

.oxygen_qa_box p{
padding:0 0 0 20px;
}



}

#pagetitle{
flex-wrap: wrap;
text-align: center;
}

#pagetitle p{
font-size: 14px;
width: 100%;
text-align: center;
margin: -160px auto 0;
font-weight: 700;

}

#pagetitle h1{
width: 100%;
margin: 40px auto 0;
}


@media screen and (max-width: 768px) {
#pagetitle p{
margin: -80px auto 0;
font-size: 12px;
}

#pagetitle h1{
}
}