@charset "UTF-8";



.oneArea {
  background: linear-gradient(90deg, #d1f0ef 0%, #d1f0ef 50%, #ebf8f8 50%, #ebf8f8 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
    
}
.flex2{display: flex}
.number{background-color: #d1f0ef;width: 40%;padding:40px 20px;position: relative}
.number_box{width: 30%;vertical-align: middle}
.number_box img{width: 70%;height: auto;margin-top: 0}
.mov_title{width:67%;margin-left: 3% }

.mov{background-color: #ebf8f8;width: 60%;padding:40px 20px}

.mov ul li img{width: 100%;height: auto}

.mov ul li {width: 32%;margin-right: 2%;position: relative}

.mov ul li p{position: absolute;color: #fff;bottom: 5px;text-align: center;width: 100%;font-size: 14px}

.mov ul li:nth-child(3) {margin-right: 0}

.shadow{background-image: url("../../img/production/shadow.png");background-repeat: repeat-x;background-position: top 0;display: block;width: 100%}

.noshadow_top{;display: block;width: 100%}

.shadow2{background-image: url("../../img/production/shadow.png");background-repeat: repeat-x;background-position: top 0;}

.line_blue{border-top: solid 3px #79bcc6}

.mov_title_txt{font-size: 23px;color: #00aba5;margin-top: 15px}

.video_size{width: 100%;max-width: 800px;max-height: 100%;height: 100%; padding: 0;margin: 0;display: block;line-height: 0}

#video{line-height: 0}

.arrow{position: absolute;bottom: -28px;left: 30px;z-index: 99}
@media screen and (min-width: 769px) {

    
}

@media screen and (max-width: 768px) {
    .arrow{position: absolute;bottom: -28px;left: 35%;z-index: 99}
    .flex2{display: block}
 .mov_title_txt{font-size: 4.5vw;color: #00aba5;line-height: 1.3em;margin: 10px 0}
    .number{background-color: #d1f0ef;width: 40%;padding:30px 10px 20px 20px}
.number_box{width: 100%;vertical-align: middle;text-align: center}
.number_box img{width: 50%;height: auto;margin-top: 0}
.mov_title{width:100%;margin-left: 0% }
    
    .mov ul.flex{display: block}
.mov ul li {width: 100%;margin-right: 0%;position: relative;display: block;margin-bottom: 10px}
}



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

    
    }






/*makeup*/

.mb20pc{margin-bottom: 20px}
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  background-color: #edf9f9;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: 33.33333%;
  height: 50px;
    padding-top: 15px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #99dddb;
  line-height: 1.3em;
  font-size: 16px;
  text-align: center;
  color: #fff;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
    border-right: solid 1px #fff
}
.tab_item:hover {
background-color: #5ab4bd
}

.tab_last{padding-top: 8px!important;border-right: none}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 0;
  clear: both;
  overflow: hidden;
    background-color: #fff
}
.tab_box{padding: 40px}

/*選択されているタブのコンテンツのみを表示*/
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content,
#tab05:checked ~ #tab05_content,
#tab06:checked ~ #tab06_content,
#tab07:checked ~ #tab07_content,
#tab08:checked ~ #tab08_content,
#tab09:checked ~ #tab09_content,
#tab10:checked ~ #tab10_content{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

.result_answer ul {width: 100%;display: inline-block;}
.result_answer ul li{width: 20%;margin-right: 2%;float: left}

.result_answer ul li:nth-child(5){margin-right: 0} 

.result_answer ul li img{width: 100%;height: auto;}
.result_answer ul li.result_box_title{ color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
width:10%;padding:1.5% 0;
height: 100%;
margin-right: 20px;
background-color: #00aea6;
text-align: center;
line-height: 1em;
margin-top: 6%;}

.title_type .result_answer ul li.result_box_title{ margin-top: 0;}

.result_box_title span{font-size: 40px;line-height: 1em;font-weight: bold}

.makeup_box{border-bottom: solid 1px #ccc;padding-bottom: 40px;padding-top: 40px}

.makeup_box:last-child{border: none}

p.window_txt{margin: 30px auto}


@media screen and (max-width: 900px) {
.result_answer ul li.result_box_title{
margin-top: 3%;}
    
    }


@media screen and (max-width: 768px) {.result_box_title span{font-size: 100%;font-weight: bold}

.result_box_title{ color: #fff;
  display: block;
  flex-direction: column;
  justify-content: center;
  align-items: center;
width: 100%;padding:5px 10px;
    font-size: 4vw;
height: auto;

background-color: #00aea6;
text-align: center;
line-height: 1em;
margin-top: 0;
    margin-bottom: 15px}
    
    .tab_box{padding: 15px}
    
    p.window_txt{margin: 10px auto 0}
    
    .result_answer ul li{width: 48%;float: right;text-align: center;margin: auto;min-height: 65vw;margin-right: 4%;margin-bottom: 2%}
	
	.result_answer ul li:nth-child(2){margin-right: 0}
	.result_answer ul li:nth-child(4){margin-right: 0}
    
    .hyougumi .result_answer ul li{width: 100%;float: none;text-align: center;margin: auto;min-height:auto}
    
    .hyougumi .result_answer ul li img{width: 60%}
    .result_answer ul li img{margin: 0}
    
    .tab_box .flex{display: block}
}