@charset "UTF-8";

.product-intro{
	display: flex;
	justify-content: space-between;
	padding: 0;
}
.product-name {
	border-left: 8px solid #3ca062;
    padding: 5px 0 0 0.8em;
    margin-bottom: 20px;
}
.product-name h2{
	font-size: 310%;
	margin: 10px 0;
	color: #4d4d4d;
	font-weight: 600;
    text-align: left;
	line-height: 1.2;
}
 .product-name h2::after {
		content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: none;
    margin: 0;
}
.product-features ul{
	display: flex;
	padding: 0;
	justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 370px;
}
.product-features {
	margin-bottom: 24px;
}
.product-features li{
	color: #fff;
    background-color: #3ca062;
    border-radius: 4px;
    margin: 3px;
    padding: 0.15em 0.5em;
    font-size: 80%;
    text-align: center;
}
.product-features ul li {
    width: calc(33.333% - 6px);
}
.product-features ul:last-child li {
    width: calc(50% - 6px);
}
.product-features li.unselected{
	background: #999;
}
.product-features li.reverse{
	color: #3ca062;
	border:1px solid #3ca062;
    background-color: #fff;
    border-radius: 4px;
    margin: 3px;
    padding: 0.15em 0.5em;
    font-size: 80%;
}
.product-features li.reverse.unselected{
	color: #999;
	border:1px solid #999;
}
.product-features p.award{
	color: #3ca062;
}
.product-icons{
	margin-bottom: 10px;
}
.product-intro div.for-pc {
    width: 45%;
}
.product-intro div.for-pc img {
    width: 100%;
}
.product-intro div.product-inner {
    width: 50%;
    margin: 0;
}
.product-intro button {
	color: #3ca062;
    border: 2px #3ca062 solid;
    max-width: 370px;
	width: 100%;
}
.product-intro button::before {
	display: none;
}
.product-intro button a{
	color: #3ca062;
}
.product-intro button a:hover{
	color: #fff;
}
.product-intro button > span::before {
    content: url(../img/icon-mail.svg);
    display: inline-block;
    width: 25px;
    padding-top: 3px;
    margin-right: 0.75em;
}
.product-intro button:hover {
	background-color: #3ca062;
	color: #fff;
}
.product-intro button:hover > span::before {
    content: url(../img/icon-mail-w.svg);
}
.product-intro > span {
    display: flex;
}
.product-intro span span {
    display: inline-block;
    font-size: 100%;
}

.sec-tabs {
    position: relative;
    max-width: none;
}
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  max-width: 970px;
  margin: 0 auto;
}
.tabs p{
    margin-block-start: 1em;
    margin-block-end: 1em;
	margin: 1em 0;
}
.tab_item {
    width: 100%;
	max-width: 14.28%;
    min-width: 14.28%;
	width: -moz-available;
	width: -webkit-fill-available;
    border-left: 1px solid #999999;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 2px solid #b5b5b5;
    transition: .3s;
}
.tab_item:hover {
    opacity: 0.75;
    border-bottom: 2px solid #dedede;
}
.tab_item.tab_last{
	border-right: 1px solid #999999;
}
.tabs-border {
    width: 100vw;
    height: 2px;
    background: #b5b5b5;
    position: absolute;
    left: 0;
    top: 49px;
    z-index: -1;
}
.simpleTabs {
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
}

input[name="tab_item"] {
  display: none;
}
input:checked + .tab_item:hover {
  opacity: 1;
}

.tab_content {
  display: none; /*コーディングとconcrete5でタブの挙動が異なるため変更*//* →20220615 test環境でタブが動かないため一時解除*/
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}
.tab_content_description h3 {
	text-align: center;
	font-size: 135%;
	color: #4d4d4d;
	margin-block-start: 0;
    margin-block-end: 1.5em;
}
.tab_content_description h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    border-bottom: 2px solid #808080;
    margin: 0.25em auto 1em;
}
.tab_content_description h4 {
	font-size: 135%;
	color: #3ca062;
	margin-block-start: 0;
    margin-block-end: 0.8em;
}
.tab_content_description ul {
	display: flex;
	padding: 0;
}.tab_content_description li {
	width: 45%;
}
.features {
	margin-bottom: 50px;
}
.features ul {
	margin-bottom: 30px;
	justify-content: space-between;
}
.useful ul{
	margin-left: 15%;
}
.useful ul li{
	width: auto;
}
.useful ul li:first-child{
	width: 80px;;
}
.useful p{
	margin:0;
}
/*選択されているタブのコンテンツのみを表示*/
#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 {
  display: block;
}
.tabs input:checked + .tab_item {
  border-bottom: 2px solid #3ca062;
  color: #3ca062;
}
.sec-member{
    margin-bottom: 0;
}
main > .box-btn {
    margin: 0 20px;
}

button.btn-green.btn-login::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(../img/icon_login_green.svg);
  background-size: contain;
    background-repeat: no-repeat;
  vertical-align: middle;
}
button.btn-green.btn-login:hover::before {
  background-image: url(../img/icon_login_white.svg);
}
button.btn-green.btn-signup, button.btn-green.add-to-list{
    color: #fff;
    background: #3ca062;
    margin-top: 0;
}
button.btn-green.btn-signup:hover, button.btn-green.add-to-list:hover{
    color: #3ca062;
    background: transparent;
}
button.btn-green.btn-signup::before, button.btn-green.add-to-list::before{
    content: url(../img/arrow_w.svg);
}
button.btn-green.btn-signup:hover::before, button.btn-green.add-to-list:hover::before
{
    content: url(../img/arrow_g.svg);
}
.tab_content_description h5, #dl-search .mypage h3, #dl-pdf .mypage h3 {
	font-size: 115%;
    color: #4d4d4d;
    border-left: 6px solid #3ca062;
    font-weight: 700;
    padding-left: 0.5em;
    margin-bottom: 1em;
    line-height: 2.95em;
}
#tab07_content .box-btn-custom p, #tab07_content_sp .box-btn-custom p{
    margin: -30px auto 20px;
    text-align: center;
}
#tab07_content_sp .box-btn-custom p{
    font-size: 0.85em;
}
/*****************/
.search-result label{
    color: #3ca062;
    border: 2px #3ca062 solid;
    margin: 2em auto;
    cursor: pointer;
    border-radius: 40px;
    padding: 0 1em;
    width: 270px;
    height: 4.5em;
    display: flex;
    align-items: center;
    transition: all .3s;
}
.search-result label span{
    margin: auto;
    letter-spacing: 1em;
    white-space: nowrap;
}
.search-result label span:after {
  content: " ";
  margin-left: -1em;
}
.search-result label:hover {
    color: #fff;
    background: #3ca062;
}
.search-result input {
    display: none;
}
.search-result .result{
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.search-result input:checked ~ .result {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
/*****************/
.modal_content {
    background: #fff;
    color: #404040;
}
.modal_content h3 {
    background: #666;
    padding: 0.25em;
}
.modal_content .dl-form ul{
    justify-content: normal;
}
.modal_content .dl-form .form-inner{
    width: 100%;
}
.dl-form .form-inner ul{
    display: block;    
}
.dl-form .form-inner ul li{
    justify-content: flex-start;
}
.dl-form .form-inner ul li, .dl-form .form-inner ul li:first-child {
    color:#727171;
}
.dl-form .form-inner ul li.ttl{
    font-weight: bold;
    width: 100%;
    border-bottom: 1px solid #999;
}
.dl-form .form-inner ul li ul{
    display: flex;
}
.dl-form li label {
    width: max-content;
    white-space: nowrap;
    padding: 4px 1.5em 0 0.5em;
}
.dl-form.others{
    background: #ebf5ef;
    padding-top: 0.8em;
    max-width: 970px;
}
button.btn-green.dl-modal-close{
    color: #fff;
    background: #666;
    border: 2px solid #666;
}
button.btn-green.dl-modal-close:hover {
    color: #404040;
    background: #fff;
    border: 2px solid #404040;
    
}
button.btn-green.dl-modal-close::before, button.btn-green.dl-modal-close:hover::before{
    content: none;
}
button.btn-green.add-to-list, button.btn-green.dl-modal-close{
    margin: 4em 0.5em 3em;
}
button.btn-green.check-list {
    margin: 0 0 4em;
}
#dl-search .search-result, #dl-pdf .search-result{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#dl-search .search-result label, #dl-pdf .search-result label {
    margin: 3em 0.65em 2em auto;
}
#dl-search .search-result button.twoline.btn-logout, #dl-pdf .search-result button.twoline.btn-logout{
    margin: 3em auto 2em 0.65em;
    width: 270px;
}
#dl-search .result, #dl-pdf .result{
    min-width: 760px;
}
#dl-search .tab_content_description h3::after {
    content: none;
}
#dl-pdf .tab_content_description .scroll table.dl-pdf,
#dl-pdf .tab_content_description td, 
#dl-pdf .tab_content_description th{
    border-left: none;
    border-right: none;
    text-align: left;
}
#dl-pdf .tab_content_description th{
    width: 50%;
    font-weight: normal;
    background: rgba(0, 0, 0, 0.1);
}
#dl-pdf .tab_content_description td:first-child{
    font-weight: 600;
    font-size: 120%;
}

.search-result .dl-pdf input {
    display: inline-block;
}
.search-result .dl-pdf span, #dl-pdf-form .form-inner ul.agreement li span, #dl-pdf-form .form-inner ul.agreement a{
    margin: 0 0 0 0.5em;
}
#dl-pdf.dl-pdf-input #dl-pdf-form .form-inner ul li:nth-child(n + 2) {
    font-weight: 500;
    color: #727171;
}
#dl-pdf.dl-pdf-input #dl-pdf-form .form-inner .indent_li, #dl-pdf.dl-pdf-input #dl-pdf-form .form-inner ul.agreement{
    border-top: 1px dotted #ccc;
}
#dl-pdf.dl-pdf-input #dl-pdf-form .form-inner .indent_li ul li:nth-child(2){
    width: 60px;
}
#dl-pdf.dl-pdf-input #dl-pdf-form .form-inner .indent_li ul li.comName{
    width: auto;
}
#dl-pdf.dl-pdf-input #dl-pdf-form .form-inner ul.agreement{
    flex-wrap:wrap;
}
#dl-pdf.dl-pdf-input #dl-pdf-form .form-inner ul.agreement li:first-child{
    justify-content: flex-start;
}
#dl-pdf.dl-pdf-input #dl-pdf-form .form-inner ul.agreement li:nth-child(n + 2){
    align-items: baseline;
}
#dl-pdf-form .form-inner ul.agreement a::before {
    content: url(../img/arrow.svg);
    display: inline-block;
    width: 6px;
    margin: 0 0.5em 0.25em 1.0em;
}
#dl-pdf.dl-pdf-prev a.btn-green, #dl-list a.btn-green, .sec-page-head div.dl-list a{
    color: #fff;
    background: #3ca062;
    border: 2px #3ca062 solid;
    border-radius: 40px;
    padding: 0 1em;
    width: 270px;
    height: 5.25em;
    display: flex;
    align-items: center;
    transition: all .3s;
    margin: 2.0em auto;
}
#dl-pdf.dl-pdf-prev a.btn-green{
    margin: 3.8em 0.5em 3em;
}
#dl-pdf.dl-pdf-prev a.btn-green:hover, #dl-list a.btn-green:hover, .sec-page-head div.dl-list a:hover{
    color: #3ca062;
    background: transparent;
}
#dl-pdf.dl-pdf-prev a span, #dl-list a.btn-green span, .sec-page-head div.dl-list a span {
    width: auto !important;
    margin: auto;
    font-weight: 500;
    font-size: 130%;
    vertical-align: middle;
}
.sec-page-head div.dl-list a::before {
    content: url(../img/arrow_w.svg);
    display: block;
    width: 7px;
    margin-left: 1em;
}
.sec-page-head div.dl-list a:hover::before {
    content: url(../img/arrow_g.svg);
    display: block;
    width: 7px;
    margin-left: 1em;
}

@media screen and (max-width: 767px) {
	.sec-page-head {
		margin-bottom: 0;
	}
	.product-title{
		height: 78px;
	}
	h1{
		font-size: 1.5em;
		position: relative;
	}
    .product-intro button {
        width: 100%;
        max-width: none;
        text-align: left;
    }

	.product-intro {
    justify-content: center;
	flex-direction: column-reverse;
	margin-top: 30px;
}
    .sp-img.for-sp {
        text-align: center;
    }
	.product-intro img{
		width: 100%;
        max-width: 480px;
	}
	.product-icons ul{
		display: flex;
		justify-content: flex-start;
        width: 100%;
        max-width: none;
	}
	.product-intro div.product-inner{
		width: 100%;
	}
	.sp-img{
		margin-bottom: 40px;
	}
	section.sec-tabs{
		padding: 0;
	}
	.sp_tb *, .sp_tb *:after, .sp_tb *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	}
	.sp_tb {
	overflow-x: hidden;
	margin: 0 auto 40px;
	color: #333333;
	}
	.sp_tb .sp_actab {
	border-bottom: 1px solid #cccccc;
	position: relative;
	margin-bottom: 0.25em;
	}
	.sp_tb label {
	font-size: 110%;
    color: #3ca062;
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
    text-align: center;
	cursor: pointer;
	padding: 10px 0;
	}
	.sp_tb label:hover {
	text-decoration: none;
	}
	.sp_tb .sp_actab-content {
	font-size: 1em;
	position: relative;
	overflow: hidden;
	height: 0;
	padding: 0 14px;
	-webkit-transition: 0.4s ease;
	        transition: 0.4s ease;
	opacity: 0;
	}
	.sp_tb .sp_actab input[type=checkbox]#sp_tab01:checked ~ .sp_actab-content,
    .sp_tb .sp_actab input[type=checkbox]#sp_tab02:checked ~ .sp_actab-content,
    .sp_tb .sp_actab input[type=checkbox]#sp_tab03:checked ~ .sp_actab-content,
    .sp_tb .sp_actab input[type=checkbox]#sp_tab04:checked ~ .sp_actab-content,
    .sp_tb .sp_actab input[type=checkbox]#sp_tab05:checked ~ .sp_actab-content,
    .sp_tb .sp_actab input[type=checkbox]#sp_tab06:checked ~ .sp_actab-content,
    .sp_tb .sp_actab input[type=checkbox]#sp_tab07:checked ~ .sp_actab-content {
	height: auto;
	padding: 10px 15px;
	margin: 10px 0 0;
    opacity: 1;
    border-top: 2px solid #3ca062;
	}
	.sp_actab label:after, .sp_actab label:before {
    color: #1D2088;
    content: '';
		display: block;
		width: 15px;
		height: 3px;
		border-radius: 5px;
    	background: #1D2088;
		transform: translateY(-50%);
	font-weight: 900;
    position: absolute;
    top: 50%;
    right: 10px;
	-webkit-transition: 0.4s ease;
	        transition: 0.4s ease;
	}
	.sp_actab label:after {
		transform: translateY(-50%) rotate(90deg);
	}
	.sp_actab input:checked ~ label::after {
		transform: rotate(0);
    	/*transform: rotateZ(-90deg);*/
	}
	.sp_tb .sp_actab input[type=checkbox] {
	display: none;
	}
	.tab_content_description h3, .tab_content_description h4 {
	font-size: 100%;
	}
	.tab_content_description h4{
	margin-block-end: 0.2em;
	}
	.tab_content_description ul {
	display: block;
	}
	.tab_content_description li {
    width: 100%;
	}
	.useful ul {
		margin: 0;
	}
	.useful li {
		margin-bottom: 0.25em;
	}
	.product-name h2{
		font-size: 280%;
	}
    /*****************/
    .tab_content_description .sp_search-form li {
    margin-bottom: 0;
    }
    .sp_tb .sp_search-result label{
    color: #3ca062;
    border: 2px #3ca062 solid;
    margin: 2em auto;
    cursor: pointer;
    border-radius: 40px;
    padding: 0 1em;
    width: 100%;
    height: 4.5em;
    display: flex;
    align-items: center;
    transition: all .3s;
    }
    .sp_tb .sp_search-result label span{
    margin: auto;
    letter-spacing: 1em;
    white-space: nowrap;
    }
    .sp_search-result label span:after {
  content: " ";
  margin-left: -1em;
    }
.sp_search-result .sp_result{
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
    .sp_actab .sp_search-result label:after, .sp_actab .sp_search-result label:before {
		content: none;
	}
    .sp_tb .sp_actab .sp_search-result  input[type=checkbox]#sp_search:checked ~ .sp_result {
    padding: 10px 0;
    height: auto;
    opacity: 1;
    }
    .sp_tb .sp_actab .others #others input[type=checkbox] {
    display: block;
    }
    .sp_actab .others #others label{
        margin: 0;
    }
    .sp_actab .others #others label:after, .sp_actab .others #others label:before {
        content:none;
    }
    .sp_actab .others .box-btn{
        padding-bottom: 4em;
    }
    .sp_actab .others .box-btn button:nth-child(2){
        margin: auto;
    }
/*****************/
    .dl-form li label{
        white-space: normal;
    }
    .dl-form .form-inner ul li ul {
    flex-wrap: wrap;
}
    button.btn-green.add-to-list, button.btn-green.dl-modal-close {
    margin: 3em auto;
}
    #dl-search .search-result label {
        margin: 2em auto;
}
    #dl-search .search-result button.twoline.btn-logout{
        margin: 0 auto 2em;
    }
    #dl-search .result {
        min-width: 100%;
    }
    .search-result label, #dl-pdf .search-result label{
        margin: 3em auto 2em;
    } 
    #dl-search .search-result button.twoline.btn-logout, #dl-pdf .search-result button.twoline.btn-logout{
        margin: 0 auto 2em;
    }
    #dl-search .result, #dl-pdf .result {
        min-width: 100%;
    }
    #dl-pdf.dl-pdf-prev a.btn-green, #dl-list a.btn-green{
        width: 100%;
        margin: 0 auto;
    }
    #dl-list a.btn-green{
        margin: 4em auto 0;
    }

}