@charset "UTF-8";
/* CSS Document */

/*PC*/
@media print, screen and (min-width: 769px) {

/* about
--------------------------------------------*/
    
    
.top_text {
  font-size: 19px;
  font-weight: 700;
  line-height: 2;
  letter-spacing: -0.03em;
  text-align: left;
  margin: 60px 0;
}
    
.about { position: relative; margin-bottom: 200px; }
.about {margin: 0 auto; margin-bottom: 200px;}
.about .com_text{font-size: 24px; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; margin: 50px 170px 0 170px;}
    
.top{margin-bottom: 100px;}
.top .text{font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; margin: 0 100px; text-align: center;}
.innocence{margin-bottom: 100px; display: flex; justify-content: space-between; margin-top: 150px;}
.brand{margin-bottom: 150px;}
.toryou{margin-bottom: 150px;}
.strength{margin-bottom: 150px;}
.different{margin-bottom: 150px;}
.sinka{margin-bottom: 200px;}
    
.about .innocence h4{width: 40%;}
.about .brand  h4{margin: 30px; position: relative; z-index: 1; color: #fff; font-size: 60px; margin: 0; text-align: center;} 
.about .sinka h4{width: 40%;}
.about .toryou h4{text-align: center; margin-bottom: 70px;}
    
.about .content_com_text{width: 50%;}
.about .toryou .content_com_text{width: 100%;} 
    
    
.about .brand .bg_box{background: url("../images/about/img03.jpg");background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 200px 0;}   
.about .brand .bg_box::after { content: ""; background: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.about .brand .content_com_text{width: 80%; margin: 0 auto; color: #fff; position: relative; z-index: 1; line-height: 2.5; padding-top: 50px; letter-spacing: 1.2px; text-align: center;}  


.suisei{margin: 200px auto; position: relative;}
    
.suisei .text_box{width: 80%; margin: 0 auto;}
    
    
.suisei .bg_img{position: absolute; top: 0; width: 100%; z-index: -1;}
    
.suisei .bg_img img{width: 100%;}
    
.suisei .bg_img::after{   
content: "";
    background: rgba(0,0,0,.3);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
    
    
.suisei .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}
.suisei .left_box{padding-top: 50px;}
.suisei .left_box .icon_item{width: 180px; margin: 0 23%;}

.suisei .text_box{font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: -0.03em; margin-top: 30px;}

    
.suisei .content_com_text{color: #fff; line-height: 2.2; width: 100%; letter-spacing: 1.8px;}
    
.suisei .jp_sbtit{color: #fff;}
    
.sinka .flex_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}  
    
rt{font-size: 11px;}
  
.strength h4{text-align: center;}
  
    
/* ポップアップ
--------------------------------------------*/
.strength ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 100px;}
.strength li.list_01{width: 28%; background: #fff; background: url("../images/about/img06.jpg") no-repeat center; background-size: cover; position: relative; transition: all 0.3s ease-out; box-shadow: 5px 5px 0px #a0a0a0;}
.strength li.list_01:hover{box-shadow: 10px 10px #fff; transition: all 0.3s ease-out;}

.strength li.list_02{width: 28%; background: #fff; background: url("../images/about/img07.jpg") no-repeat center; background-size: cover; position: relative; transition: all 0.3s ease-out; box-shadow: 5px 5px 0px #a0a0a0;} 
.strength li.list_02:hover{box-shadow: 10px 10px #fff; transition: all 0.3s ease-out;}   


.strength li.list_03{width: 28%; background: #fff; background: url("../images/about/img08.jpg") no-repeat center; background-size: cover; position: relative; transition: all 0.3s ease-out; box-shadow: 5px 5px 0px #a0a0a0;}  
.strength li.list_03:hover{box-shadow: 10px 10px #fff; transition: all 0.3s ease-out;}       
   
.strength li  .pop_box{text-align: center; height: 400px;}
.strength ul li h3{font-size: 30px; font-weight: 800; line-height: 1.5; text-align: center; position: relative; z-index: 1; color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}

.open {
	cursor:pointer;
}
#pop-up,#pop-up02,#pop-up03,#pop-up04{
	display: none;
}

.overlay {
	display: none;
}
    
   
#pop-up:checked + .overlay,
#pop-up02:checked + .overlay,
#pop-up03:checked + .overlay,
#pop-up04:checked + .overlay{
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
}

    
.window {
	position: fixed;
	top: 50%;
	left: 50%;
    padding: 30px;
	background-color: #000;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
    border: solid 3px;
}

.window .window_text{
font-size: 17px; font-weight: 600; margin-top: 15px; letter-spacing: 1px;}
    
.window .window_img{position: relative;}

    
.window .close {
position: absolute;
top: -11px;
right: 1px;
cursor: pointer;
font-size: 35px;
color: #fff;
}
    
  
.about .different .flex_wrap{display: flex; flex-wrap: wrap; align-items: center;}
.about .different .flex_wrap .right_box{width: 60%;}
.about .different .jp_sbtit{width: 40%;} 
.about .different .content_com_text{width: 100%;}
  

/* select
--------------------------------------------*/
    
.about .select .flex_wrap {
  display: flex;
  flex-wrap: wrap;
}
   
.about .select .flex_wrap .jp_sbtit{
width: 40%;     
    }

.about .select .content_com_text {
width: 50%;
}

.about .select h4 {
  text-align: left;
}
    
    
}


/*sp*/
@media only screen and (max-width: 768px) {

/* index
--------------------------------------------*/

.about{box-sizing: border-box;}
    
.about .top{margin-bottom: 100px; padding: 0 5%; }
.about .innocence{margin-bottom: 100px; padding: 0 5%; }
.about .brand{margin-bottom: 100px; }
.about .toryou{padding: 0 5%; margin-bottom: 100px; }
.about .suisei{margin-bottom: 100px; }
.about .sinka{padding: 0 5%; margin-bottom: 100px; }
.about .different{padding: 0 5%; margin-bottom: 100px;}  
.about .select{padding: 0 5%; margin-bottom: 100px;} 
.about .search_list{margin-bottom: 100px;} 
    
   
    
.suisei{position: relative;}
.suisei .icon_box{display: flex; flex-wrap: wrap; justify-content: center; margin: 50px 0;}
.suisei .text_box{font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; margin: 30px 0; padding-top: 50px;}
.suisei .img_box{height: 250px; width: 100%; background: url("../images/about/img02.jpg") no-repeat center; background-size: cover; position: relative;}
.suisei .img_box:before{ content: "";background: rgba(0,0,0,.5);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.suisei .icon_box{display: flex; flex-wrap: wrap; justify-content: center; margin: 50px 0; z-index: 1; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);}
.suisei .icon_box .icon_item{width: 48%;}
  
.suisei .jp_sbtit{margin: 0 5%; color: #fff;}
.suisei .content_com_text{margin: 30px 5%; color: #fff; line-height: 1.6;}

    
.suisei .bg_img{position: absolute; top: 0; width: 100%; z-index: -1;}
    
.suisei .bg_img img{width: 100%;}
    
.suisei .bg_img::after{   
content: "";
    background: rgba(0,0,0,.3);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


.about .brand  h4{position: relative; z-index: 1; color: #fff; padding: 0 5% 0 5%;}     
.about .brand .bg_box{background: url("../images/about/img03.jpg") no-repeat center; object-fit: cover; position: relative; padding: 30px 0;}
.about .brand .bg_box::after { content: ""; background: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0;   left: 0;}
.about .brand .content_com_text{color: #fff; line-height: 2.2; text-align: left; padding: 0 5%; position: relative; z-index: 2;}  

rt{font-size: 9px;}
    
  
    
/* ポップアップ
--------------------------------------------*/

.strength li.list_01{width: 100%; background: #fff; background: url("../images/about/img06.jpg") no-repeat center; background-size: cover;
position: relative; margin-bottom: 30px; transition: transform .6s ease;}   
.strength li.list_02{width: 100%; background: #fff; background: url("../images/about/img07.jpg") no-repeat center; background-size: cover; position: relative; margin-bottom: 30px;}  
.strength li.list_03{width: 100%; background: #fff; background: url("../images/about/img08.jpg") no-repeat center; background-size: cover; position: relative;}   
.strength li  .pop_box{text-align: center; height: 250px;}
.strength ul li h3{font-size: 30px; font-weight: 800; line-height: 1.5; text-align: center; position: relative; z-index: 1; color: #fff;
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.strength .jp_sbtit{padding: 0 5%;}
    
    
.open {
	cursor:pointer;
}
#pop-up,#pop-up02,#pop-up03,#pop-up04{
	display: none;
}

.overlay {
	display: none;
}
    
#pop-up:checked + .overlay,
#pop-up02:checked + .overlay,
#pop-up03:checked + .overlay,
#pop-up04:checked + .overlay{
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
}

.window {
	position: fixed;
	top: 50%;
	left: 50%;
    width: 80%;
    padding: 30px;
	background-color: #000;
	border-radius: 4px;
	align-items: center;
	transform: translate(-50%, -50%);
    border: solid 2px;
}

.window .window_text{
font-size: 15px; font-weight: 600; margin-top: 15px; letter-spacing: 1px;}
    
.window .window_img{position: relative;}

    
.close {
position: absolute;
top: -11px;
right: 1px;
cursor: pointer;
font-size: 35px;
color: #fff;
}
    
  

    
    
    
}