@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');

#container {
    margin-top: 4.5em;
/*    font-family: 'Noto Sans JP', sans-serif, "游ゴシック Medium", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", Verdana, Arial, Helvetica, sans-serif;*/
    font-family: 'Noto Sans JP', sans-serif;
}

section{
    margin: auto;
    padding: 40px 20px;
    font-size: 16px;
    color:#000000;
}

h1{
    margin: 0;
    padding: 0;
    background: #5AB1E7;
    line-height: 0;
}

h2{
    margin-bottom: 30px;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}

h2 span {
    font-size: 16px;
}

h3 {
    font-size: 16px;
    margin: 10px 0 20px;
    font-weight: 500;
}

#container p {
    margin-bottom: 1em;
}

h1 object {
    width: 100vw;
    height: auto;
    max-width: 1000px;
    min-height: 185.8666667vw;
    margin: 0 auto;
    display: block;
}

picture {
    margin-bottom: 20px;
    display: block;
}

.gray{
    background-color: #EFEFEF;
}

body #container section.gray.gray_arrow {
    position: relative;
    margin-bottom: 74px;
}

body #container section.gray.gray_arrow::after {
    content: "";
    background-image: url(../images/mens/gray_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -54px;
    width: 100vw;
    max-width: 375px;
    height: 54px;
}


.blue{
    background-color: #E4F7FE;
}

.blue p {
    margin-bottom: 1em;
}

.blue dt {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
}

.blue dl {
    margin: 0 30px 40px;
}

.navy{
    background-color: #2E3E58;
    color:#fff;
}

.yellow{
    background-color: #FFF8EA;
}

.marker_yellow {
    background: linear-gradient(transparent 60%, #FEFD32 60%);
}

.small {
    font-size: 14px;
}

.align-left{
    text-align: left;
}

.align-right{
    text-align: right;
}

picture img {
    width: 100%;
    height: auto;
}

.cv_btn{
    background-image: url(../images/mens/cv_bak_sp.jpg);
    background-image: image-set(url(../images/mens/cv_bak_sp.jpg) 1x, url(../images/mens/cv_bak_sp@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/mens/cv_bak_sp.jpg) 1x, url(../images/mens/cv_bak_sp@2x.jpg) 2x);
    background-size: cover;
    background-position: center;
}

.cv_btn h2 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.cv_btn h2 span {
    font-size: 20px;
}

.cv_btn a{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #02C755;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    min-height: 60px;
    padding: 0 1em;
}

.dot-text{
    position: relative;
}
.dot-text::before{
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    padding-top: 10px;
    background: -webkit-radial-gradient(circle 4px,#E61E2F 50%,transparent 50%);
    background: radial-gradient(circle 4px,#E61E2F 50%,transparent 50%);
    background: -moz-radial-gradient(circle 4px,#E61E2F 50%,transparent 50%);
  }

#quality{
    background-image: url(../images/mens/quality_bak_sp.jpg);
    background-image: image-set(url(../images/mens/quality_bak_sp.jpg) 1x, url(../images/mens/quality_bak_sp@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/mens/cquality_bak_sp.jpg) 1x, url(../images/mens/quality_bak_sp@2x.jpg) 2x);    
    background-size: cover;
    background-position: center;
}

#quality h2 {
    text-align: center;
    color: #94CFF8;
}

#quality p {
    color: #fff;
}

.white_box  {
    background: #fff;
    border: 2px solid #000;
    border-radius: 4px;
    margin-bottom: 40px;
    padding: 30px 0;
    text-align: center;
}

.white_box h3{
    font-size: 22px;
    font-weight: 500;
    margin: 0 10px 10px;
}

.white_box p{
    margin: 0 30px 20px;
}

.white_box picture {
    margin: 0 30px 10px;
    display: block;
}

#blue_section{
    padding: 0;
    text-align: center;
}

#blue01{
    background-image: url(../images/mens/blue01_sp.jpg);
    background-image: image-set(url(../images/mens/blue01_sp.jpg) 1x, url(../images/mens/blue01_sp@2x.jpg) 2x);
    background-image: -webkit-image-set(url(../images/mens/blue01_sp.jpg) 1x, url(../images/mens/blue01_sp@2x.jpg) 2x);   
    background-size: cover;
    background-position: center;
    color:#fff;
    padding:40px 20px;
}

#blue01 h2{
    font-size: 24px;
    border-bottom: 2px solid #fff;
    padding-bottom: 27px;
}

#blue01 p{
    font-size: 20px;
}

#blue01 strong{
    color:#FEFD32;
}

#blue02{
    background: linear-gradient(to right, #23A9E1,0%,#23A9E1,40%,#1678DE,80%,#1678DE);
    padding:40px 20px;
}

figcaption {
    font-size: 14px;
    text-align: right;
}



.zukai {
    margin-bottom: 40px;
}

.zukai dt{
    font-size: 22px;
    color:#000000;
    text-align: center;
    font-weight: 500;
    margin-bottom: 31px;
}

.zukai picture  {
    margin-bottom: 20px;
    display: block;
}

.flow dl{
    margin-bottom: 40px;
}

.flow dt{
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 20px;
}

.b_line {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 30px;
}

.b_line h3{
    margin-top:0;
    text-align:center;
    font-size:22px;
}

.b_line ul{
    list-style:disc;
    padding-left:20px
}

#graph img {
    margin: 0 auto 20px auto;
    display: block;
}

#graph strong{
    color:#FF0000;
}

#qa {
    font-size: 16px;
    text-align: left;
    border-top: 1px dashed #000;
    margin-bottom:0;
    padding-top: 20px;
}

#qa dt {
    text-align: left;
    font-size: 18px;
    margin-bottom: 10px;
}

#qa dt::before{
    content:"Q:";
}

#qa dd{
    padding-bottom:20px;
    margin-bottom:20px;
    border-bottom: 1px dashed #000;
}

#qa dd::before{
    content:"A:";
}

#qa dd:last-child{
    margin-bottom:0;
}


/* テーブル */

.scroll .red{
    background: #EECDCD;
}

.scroll .beige{
    background: #F8E5D0;
}

@media screen and (max-width: 720px){
    .scroll table{
        width:100%;
    }

    .scroll{
        overflow: auto;
        white-space: nowrap;
        margin: 20px 0;
        padding: 0;
    }

    .scroll th,
    .scroll td{
        padding: 5px 12px;
        white-space: normal;
        border-right: 1px solid #EFEFEF;
        border-bottom: 1px solid #EFEFEF;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 126px;
        font-size: 14px;
    }

    .scroll tr{
        border-top: 1px solid #EFEFEF;
        border-left: 1px solid #EFEFEF;
        margin-bottom: 10px;
    }

    .scroll thead td{
        display: none;
    }

    .scroll tr{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .scroll tbody tr{
        grid-template-rows: repeat(2, auto);
    }
            
    .scroll tbody tr th {
        grid-area: 1 / 1 / 2 / 4;
        background: #EFEFEF;
        text-align: center;
    }
}

h1 {
    background-image: url(../images/mens/mv_sp-image.jpg);
    background-image: image-set(url(../images/mens/mv_sp-image.jpg) 1x, url(../images/mens/mv_sp-image.jpg) 2x);
    background-image: -webkit-image-set(url(../images/mens/mv_sp-image.jpg) 1x, url(../images/mens/mv_sp-image.jpg) 2x);
    background-position: center;
    background-size: cover;
    height: 180vw;
}

@media screen and (min-width: 721px){

    section > * {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        background-image: url(../images/mens/MV_bg.jpg);
        background-image: image-set(url(../images/mens/MV_bg.jpg) 1x, url(../images/mens/MV_bg@2x.jpg) 2x);
        background-image: -webkit-image-set(url(../images/mens/MV_bg.jpg) 1x, url(../images/mens/MV_bg@2x.jpg) 2x);
        background-position: center;
        background-size: cover;
        height: auto;
    }

    h1 object {
        min-height: min(60vw, 600px);
    }


    .scroll {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0;
    }
    
    .scroll table{
        border: 2px solid #000;
        width:100%;
    }

    .scroll th,
    .scroll td,
    .scroll thead td{
        border: 1px solid #000;
        width:25%;
        padding:10px 12px
    }
}


@media screen and (min-width: 721px){

    #container {
        margin-top: 3.1em;
    }

    h2  {
        font-size: 28px;
    }

    .cv_btn {
        max-width: 1000px;
        margin: 40px auto;
        background-image: url(../images/mens/cv_bak.jpg);
        background-image: image-set(url(../images/mens/cv_bak.jpg) 1x, url(../images/mens/cv_bak@2x.jpg) 2x);
        background-image: -webkit-image-set(url(../images/mens/cv_bak.jpg) 1x, url(../images/mens/cv_bak@2x.jpg) 2x);
    }

    .cv_btn h2,
    .cv_btn h2 span{
        font-size: 32px;
    }

    .dot-text::before{
        background: -webkit-radial-gradient(circle 7px,#E61E2F 50%,transparent 50%);
        background: radial-gradient(circle 7px,#E61E2F 50%,transparent 50%);
        background: -moz-radial-gradient(circle 7px,#E61E2F 50%,transparent 50%);
    }

    .cv_btn a{
        font-size: 25px;
        width: 560px;
        min-height: 100px;
        padding: 0;
    }

    #quality{
        background-image: url(../images/mens/quality_bak.jpg);
        background-image: image-set(url(../images/mens/quality_bak.jpg) 1x, url(../images/mens/quality_bak@2x.jpg) 2x);
        background-image: -webkit-image-set(url(../images/mens/quality_bak.jpg) 1x, url(../images/mens/quality_bak@2x.jpg) 2x);
    }

    .column_2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 1fr;
        grid-column-gap: 60px;
        grid-row-gap: 0px;
        margin-bottom: 20px;
        align-items: start;
    }

    .column_2.column_reverse {
        direction: rtl;
    }

    .column_2.column_reverse p {
        direction: ltr;
    }
/*
    #lazer .column_2{
        align-items: center;
    }
*/
    #lazer h3 {
        font-size: 20px;
        grid-area: 1 / 1 / 2 / 3;
        text-align: left;
    }

    .narrow{
        max-width: 765px;
    }

    .column_3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 0px;
    }

    .column_2_3{
        display: grid;
        grid-template-columns: repeat(2, 354px);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 60px;
        grid-row-gap: 0px;
        justify-content: center;
        padding-top: 60px;
    }

    .column_2_3 > div {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 4.3em auto;
        grid-column-gap: 0px;
        grid-row-gap: 30px;
        flex-direction: column;
        justify-content: flex-start;
    }

    .column_2_3 > div > * {
        margin-left: 0;
        margin-right: 0;
    }

    #blue01 h2 br {
        display: none;
    }

    #reason .white_box {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 77px 95px auto;
        grid-column-gap: 0px;
        grid-row-gap: 10px;
    }

    #reason .white_box h3 {
        font-size: 19px;
    }

    #reason .white_box p {
        font-size: 13px;
    }

    #blue_section > div {
        max-width: 100vw;
    }

    #blue_section > div > * {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }

    #blue_section h2    {
        font-size: 30px;        
    }

    #blue_section p {
        font-size: 25px;
    }

    #blue02 img {
        width: 500px;
        height: auto;
    }
   
    #lazer {
        margin-top: 100px;
    }
    
    #lazer h2 {
        margin-bottom:35px;
    }
    
    #lazer h2 img{
        width:510px;
    }

    .b_line {
        max-width: 1000px;
    }

    .b_line ul {
        max-width: 427px;
        margin: 0 auto;
    }
   
    .b_line h3 br {
        display: none;
    }

    #graph {
        display: flex;
        align-content: center;
        align-items: center;
        gap: 76px;
        padding: 0 40px;
        margin: 0 auto;
        max-width: 920px;
    }

    #graph img{
        margin: 0;
    }

    #graph p{
        margin-right:40px;
        font-size:20px;
    }

    #graph p strong{
        font-size:50px;
        display:block;
    }

    #qa{
        width: 920px;
        margin: auto;
    }

}





/* 以下、別ページより */

/* 　temp_a_01　
============================================================================================================ */

.theme_col {
    color: #000;
}


@media screen and (min-width: 721px) {
    .plan_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .plan_list li {
        width: 49%;
        margin-bottom: 5%;
    }
    .center_ele {
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .plan_title {
        padding: 10px 0;
        text-align: center;
        border-bottom: 1px solid #3555A5;
    }
    .b_theme_col .text_box {
        margin: 15px 20px;
    }
    .plan_img {
        border: solid 1px #DCDCDC;
    }
    .plan_img > * {
        width: 33.3%;
    }
    .plan_img > * + * {
        border-left: solid 1px #DCDCDC;
    }
    .plan_img > .img {
        padding: 10px;
        width: 100%;
        height: 80px;
    }
    .plan_img .img img {
        width: 100%;
        height: 80px;
        object-fit: contain;
        object-position: center;
        font-family: 'object-fit: contain; object-position: center;'
    }
    .b_theme_col dl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: baseline;
    }
    .b_theme_col dl + dl {
        border-top: #DCDCDC solid 1px;
        margin-top: 10px;
        padding-top: 10px;
    }
    .b_theme_col dt {
        margin-right: 1em;
        font-size: 1.4rem;
    }
    .plan_btn_list {
        justify-content: space-between;
    }

    .b_theme_col {
        border: solid 1px #3555A5;
        border-radius: 5px;
        background: #fff;
        color: #000;
    }
    .b_theme_col .b_inner {
        padding: 10px;
        position: relative;
    }
    .b_theme_col .text_box {
        margin: 15px 20px;
    }
    .b_theme_col dl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: baseline;
    }
    .b_theme_col dl + dl {
        border-top: #DCDCDC solid 1px;
        margin-top: 10px;
        padding-top: 10px;
    }
    .b_theme_col dt {
        margin-right: 1em;
        font-size: 1.4rem;
    }
    }
    
    @media screen and (max-width: 720px) {

    .plan_list li + li {
        margin-top: 5%;
    }
    .plan_title {
        padding: 10px 0;
        text-align: center;
        border-bottom: 1px solid #3555A5;
    }
    .b_theme_col .text_box {
        margin: 15px 30px;
    }
    .plan_img {
        border: solid 1px #DCDCDC;
    }
    .plan_img > * {
        width: 33.3%;
    }
    .plan_img > * + * {
        border-left: solid 1px #DCDCDC;
    }
    .plan_img > .img {
        padding: 10px;
        width: 100%;
        height: 80px;
    }
    .plan_img .img img {
        width: 100%;
        height: 80px;
        object-fit: contain;
        object-position: center;
        font-family: 'object-fit: contain; object-position: center;'
    }
    .b_theme_col dl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: baseline;
    }
    .b_theme_col dl + dl {
        border-top: #DCDCDC solid 1px;
        margin-top: 10px;
        padding-top: 10px;
    }
    .b_theme_col dt {
        margin-right: 1em;
        font-size: 1.4rem;
    }
    .plan_btn_list {
        justify-content: space-between;
    }
    .b_theme_col {
        border: solid 1px #3555A5;
        border-radius: 5px;
        background: #fff;
        color: #000;
    }
    .b_theme_col .b_inner {
        padding: 10px;
        position: relative;
    }
    .b_theme_col .text_box {
        margin: 15px 30px;
    }
    .b_theme_col dl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: baseline;
    }
    .b_theme_col dl + dl {
        border-top: #DCDCDC solid 1px;
        margin-top: 10px;
        padding-top: 10px;
    }
    .b_theme_col dt {
        margin-right: 1em;
        font-size: 1.4rem;
    }
}


/*-------------------- お支払方法 --------------------*/

.payment{
    background: #EDE2DF;
    padding: 20px;
    text-align: center;
    margin: 0;
}

.payment h3{
    font-size: 22px;
    font-weight: 500;
    padding: 20px;
}

/*
.payment h3{
	background:#FAA28F;
	color:#fff;
	font-family: 'Shippori Mincho B1', 'ＭＳ Ｐ明朝','MS PMincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', serif;
	font-weight:500;
	font-size:2em;
	display:inline-block;
	padding:0.2em 2em 0.8em;
	border-radius:0 0 0.8em 0.8em;
	margin:0 auto 1.5em;
	line-height:1em;
}
*/

.payment ul{
    margin: 0.5em auto;
    overflow: hidden;
    padding: 0;
}

.payment ul li{
	display:block;
	margin:0 0 2.5em;
	font-size:0.9em;
	padding:1em 1.5em;
	background:#fff;
	box-shadow:0 1px 3px #888;
	text-align:left;
	border-radius:0.4em;
}

.payment ul li h5{
	font-size:1.3em;
	font-weight:500;
	margin:0.5em 0;
}	

.payment ul li img{
	display:inline-block;
	width:30px;
	height:auto;
	margin-right:1em;
}

.payment .memo{
	text-align:center;
}

@media screen and (min-width: 721px) {

    /*-------------------- お支払方法 --------------------*/

    .payment{
        padding:0 1em 2em;
        margin-bottom:3em;
    }

    .payment h3{
        font-size:28px;
        padding:60px 1em 0.8em;
        margin:0 auto 1em;
    }

    .payment ul{
        width:95%;
    }

    .payment ul li{
        margin:0 0 2em;
        font-size:0.9em;
        padding:0.8em 1.4em;
    }

    .payment ul li h5{
        font-size:1.2em;
    }	

    .payment ul li img{
        width:30px;
    }

    .payment .memo{
        margin:0;
        padding:0;
    }


}

.button{
  margin:1em auto 2em;
  background:#67BCC2; /*エメラルドグリーン*/
  color:#fff;
  font-weight:400;
  font-size:1.2em;
  border-radius:2em;
  padding:0.5em 1.5em;
  text-align:center;
  position:relative;
  box-shadow:0 1px 3px #888;
}