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

.pc{display: none;}

.sp{display: block;}

.tws_info{
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.cp_contents{
background: var(--clr-gray-light);
position: relative;
}

.cp_contents .cp_2403{
background: rgba(115,162,190,1);
position: relative;
}

.cp_contents .cp_2408{
background: #acddf3;
position: relative;
}

.cp_contents_items{
margin: 0 auto;
position: relative;
}

.items {
position: relative;
box-sizing: border-box;
margin: 0 0 20px;
padding:0 10px 20px;
color: #FFFFFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.items_b {
color: #000000;
}

.tws_logo{
display: block;
margin: 1em;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;	
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;	
flex-wrap: wrap;
}

.tws_logo img{
max-width:260px;
}


.headline {
font-size: 14px!important;
text-align: left;
display: block;
border-bottom: solid 1px #FFFFFF;
color: #FFFFFF;
line-height: 1.5;
}

.headline_b{
border-bottom: solid 1px #000;
color: #000;
}

.items p{
font-size: 13px;
	display: block;
	width: 100%;
	line-height: 1.8;
}

.items_img{
display: block;
width: 100%;
}
.items_img img{
width: 100%;
	margin-top: 20px;
}

.items_list{
width: 100%;
margin: 10px 5px;
background-color: #FFFFFF;
	padding: 20px 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.items_list ul{
margin: 0  ;
padding: 0;
list-style: none;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.items_list ul li{
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
	width: calc(50% - 20px);
	margin-bottom: 20px;
}

.l_up{
color: #111111;
font-size: 24px!important;
text-align: center;
width: 100%!important
}

.items_list ul li p{
display: block;
color: #2D2D2D!important;
width: 100%!important;
text-align: center;
padding: 0;
font-size: 12px;
}

.items_list ul li a{
text-decoration: none
}

.items_list ul li img{
width: 100%;
}

.point_howtouse{
    padding: 0 0 20px;
    background-color: #FFFFFF;
    border-radius: 20px;
    width: 94%;
    margin: 0 auto 50px;
    box-sizing: border-box;
}

.point_howtouse_title{
padding: 0.5em 0.5em 0.5em 1em;
background-color: black;
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
border-top-right-radius:20px;
border-top-left-radius:20px;
text-align: center;
border: 1px solid #FFFFFF;
}

.point_howtouse_info{
line-height: 1.6;
font-size:13px;
margin:10px 0;
padding: 0 10px 0 24px
}
.point_howtouse_info li{
margin-bottom:6px;
}

.howtouse_link{
color:blue;
text-decoration: none;
	
}

.tab_container {
  padding-bottom: 1em;
  background-color: #fff;
  margin: 0 auto;
}

.tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;

}

.tab_item{
	opacity: 0.5;
}

.tab_img{
width: calc(50% - 10px);
margin: 0 auto;
cursor:pointer;
	box-sizing: border-box;

}

.img_l{
margin-left: 5px;

}

.img_r{
margin-right: 5px;

}


.tab_item:hover {
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 1em 1em 0;
  justify-content: center;
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content{ 
  display: block;
}
.tab_container input:checked + .tab_item {
opacity: 1;
}

	 
.cp_target{
display: block;
margin: 20px auto;
text-align:center;
font-size: 24px;
color: #fff;
}

.cp_target_b{color: #000}

.cp_target_note{
display: block;
margin: 5px auto 10px;
text-align:center;
font-size: 12px;
color: #fff;
} 

.cp_target_note_b{color: #000}

/*==================================================================================================================================*/
 @media screen and (min-width:768px) {
	 
.pc{display: block;}

.sp{display: none;}

.items {
position: relative;
box-sizing: border-box;
margin: 0 20px 40px;
padding:0 20px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
}

.tws_logo{
display: block;
margin: 0 auto 30px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;	
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;	
}

.tws_logo img{
width:450px;
}


.headline {
font-size: 18px!important;
text-align: left;
display: block;
}

.items p{

font-size: 14px;
	display: block;
	width: 50%;
	line-height: 1.8;
}

	 .long_p{
width: 100%!important;
	line-height: 1.8;
}

	 .long_p{
width: 100%!important;
	line-height: 1.8;
}

.items_img{
display: block;
width: calc(50% - 20px);
margin-left: 20px;
}
.items_img img{
width: 100%;
	margin-top: 80px;
}

.items_list{
width: 100%;
margin: 20px 5px;
background-color: #FFFFFF;
	padding: 20px 14px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.items_list ul{
margin: 0 ;
padding: 0;
list-style: none;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
	 
.items_list ul li{
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
	width: calc(100% / 3 - 20px);
}

.l_up{
color: #111111;
font-size: 24px!important;
text-align: center;
	width: 100%!important
}

.items_list ul li p{
display: block;
color: #2D2D2D!important;
width: 100%!important;
text-align: center;
padding: 0;
font-size: 12px;
}
.items_list ul li a{
text-decoration: none
}

.point_howtouse{
background-color: #FFFFFF;
border-radius:20px;	
	width: 90%;
margin: 0 5%;
}
.point_howtouse_title{
padding: 0.5em 0.5em 0.5em 1em;
background-color: black;
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
border-top-right-radius:20px;
border-top-left-radius:20px;
text-align: center;
	border: 1px solid #FFFFFF;

}

.point_howtouse_info{
line-height: 1.6;
font-size:13px;
margin:1em;
}
.point_howtouse_info li{
margin-bottom:6px;
}

.howtouse_link{
color:blue;
text-decoration: none;
	
} 
	 
.img_l{
margin-left: 5px;
}

.img_r{
margin-right: 5px;
} 

}
	 
/*==================================================================================================================================*/
/*PC*/
@media only screen and (min-width : 1025px) {

.pc{display: block;}

.sp{display: none;}

.items {
position: relative;
box-sizing: border-box;
margin: 0 20px 20px;
padding:0 20px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
	
.tws_logo{
display: block;
margin: 1em;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;	
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
flex-direction: column;
}

.tws_logo img{
width:450px;
margin: 0 auto;
display: block;
}

.headline {
font-size: 20px!important;
text-align: left;
display: block;
}

.items p{
font-size: 16px;
	display: block;
	width: 50%;
	line-height: 1.8;
}

.long_p{
width: 100%!important;
line-height: 1.8;
}

.items_img{
font-size: 16px;
display: block;
width: calc(50% - 20px);
margin-left: 20px;
}

.items_img.img_l{
margin-left: 0;
margin-right: 20px;
}

.items_img img{
width: 100%;
	margin-top: 20px;
}

.items_list{
width: 100%;
margin: 20px 5px;
background-color: #FFFFFF;
	padding: 20px 60px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.items_list ul{
margin: 0 ;
padding: 0;
list-style: none;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.items_list ul li{
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
	width: calc(100% / 3);
	margin-bottom: 30px;
}

.l_up{
color: #111111;
font-size: 24px!important;
text-align: center;
	width: 100%!important
}

.items_list ul li p{
display: block;
color: #2D2D2D!important;
width: 100%!important;
text-align: center;
padding: 0;
font-size: 14px;
}
.items_list ul li a{
text-decoration: none
}
.items_list ul li img{
display: block;
margin:auto;
width: 80%;
}

.items_list ul li img:hover {
transform: scale(1.1,1.1) translateY(-5px);

transition-duration: 0.5s;
}

.items_list ul li a{
text-decoration: none
}
.point_howtouse{
padding:0;
background-color: #FFFFFF;
border-radius:20px;	
	width: 90%;
	margin: 0 5% 20px;
}
.point_howtouse_title{
padding: 0.5em 0.5em 0.5em 1em;
background-color: black;
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
border-top-right-radius:20px;
border-top-left-radius:20px;
text-align: center;
border: 1px solid #FFFFFF;
}

.point_howtouse_info{
line-height: 1.6;
font-size:13px;
margin:2em;
}
.point_howtouse_info li{
margin-bottom:6px;
}

.howtouse_link{
color:blue;
text-decoration: none;
	
}



/*タブ切り替え*/

/*
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
.tab-label {
    color: White;
    margin-right: 5px;
	margin-bottom: 30px;
    order: -1;
	 opacity: 0.6;
}
.tab-content {
    width: 100%;
    display: none;
}
/* アクティブなタブ */
/*
.tab-switch:checked+.tab-label {
 opacity: 1;
	border-bottom: solid 5px #EF0094;
}
.tab-switch:checked+.tab-label+.tab-content {
     display: block;
}
/* ラジオボタン非表示 */
/*
.tab-switch {
    display: none;
}*/


.tab_container {
  padding-bottom: 1em;
  background-color: #fff;
  margin: 0 auto;
}
.tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;



}
.tab_item{
	opacity: 0.5;
}



.tab_img{
width: calc(50% - 10px);
margin: 0 auto;
cursor:pointer;
	box-sizing: border-box;

}

.img_l{
margin-left: 5px;

}

.img_r{
margin-right: 5px;

}


.tab_item:hover {
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  padding: 1em 1em 0;
  justify-content: center;
  clear: both;
  overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content{ 
  display: block;
}
.tab_container input:checked + .tab_item {
opacity: 1;
}
	
.cp_target{
display: block;
margin: 20px auto;
text-align:center;
font-size: 24px;
}

.cp_target_note{
display: block;
margin: 5px auto;
text-align:center;
font-size: 13px;
}
	
}