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

@import "crm.css";

* { margin: 0; padding: 0; }

.clearfix:after {
  content: ".";  /* 新しいコンテンツ */
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; /* 非表示に */
}

body, html{
	background: #fff;
	color: #000;
    height: 100%;
}

img{
	max-width: 100%;
}

#calmo2025-body{
	width: 90%;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	padding: 0 0 2%;
	margin: 0 auto;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.44);
    
}

#calmo2025-body header{
	width: 90%;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	padding:  0;
	display: flex;
    align-items: stretch;
    z-index: 10000;
    position: fixed;
}


#calmo2025-body h1{
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	padding:  0;
    margin: 0;
    display: flex;
    background-color: #fff;

}

#calmo2025-body h1 dl{
    width: 100%;
    padding:  0;
    margin: 0;
    display: flex;
    justify-content: center;
  align-items: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}

#calmo2025-body h1 dl dt{
    padding: 0;
    margin: 0;
    width: 64%;
    text-align: center;
}


#calmo2025-body h1 dl dt img{
	width: 80%;
    margin: 2% 0;
}

#calmo2025-body h1 dl dd{
    font-family: Helvetica Neue LT Std, sans-serif;
    font-weight: 400;
    width: 36%;
    margin: 1% 0 0 ;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}


#calmo2025-body #contact{
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	padding:  0;
    margin: 0;
    background-color: #fff;
    display: flex;
	justify-content: center;
  align-items: center;
    width: 15%;
    
}

#calmo2025-body #contact a{
	width: 100%;
    display: block;
    display: flex;
	justify-content: center;
  align-items: center;
}

#calmo2025-body #contact img{
    vertical-align: middle;
    border: none;
    max-width: 80%;
}

#com-info{
    width: 90.14%;
	padding:0 0;
    margin: 0 auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.44);
}

#com-info dl{
    width: 100%;
    display: flex;
    justify-content: center;
  align-items: center;
}

#com-info dl dt{
    width: 50%;
    background-color: #005bac;
  
}

#com-info dl dt a{
    width: 100%;
    padding: 4% 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    
}

#com-info dl dd{
    width: 25%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  align-items: center;
   
}

#com-info dl .takumi{
    width: 15%;
}

#com-info dl .sns{
    width: 35%;
}

#com-info dl dd a{
    width: 100%;
    display: flex;
    justify-content: center;
  align-items: center;
    text-align: center;
}

#com-info dl .takumi img{
    width: 32%;
    vertical-align: middle;
    padding: 0 0;
}

#com-info dl .sns img{
    width: 10%;
    margin: 0 2% 0 0;
    vertical-align: middle;
}



footer{
	width: 90.14%;
	padding: 2% 0;
	margin: 0 auto;
	color: #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #87b2e0;
    text-align: center;
    grid-row-start: 2;
  grid-row-end: 3;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.44);
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}


#calmo2025-body #main-top{
	width: 100%;
    margin: 0;
    padding: 6% 0 0 0;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}



#calmo2025-body #main-top video {
    width: 100%;
    height: auto;
    margin: 0 0 2%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


#calmo2025-body .top-c{
	width: 90%;
    margin: 0 auto;
    padding: 0;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

#calmo2025-body .top-c h2{
    margin: 4% auto 2%;
    padding: 0 1%;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 0.2vh solid #000;
    display: inline-block;
    font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}

#calmo2025-body .top-c p{
    margin: 1% 0 0;
    padding: 0;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
    line-height: 1.5;
}

#calmo2025-body .top-c .flex-box,#calmo2025-body .top-c .flex-box2{
	width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
	justify-content: center;
  align-items: center;
    flex-wrap :wrap;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
}



#calmo2025-body .top-c .flex-box dl{
	width: 48%;
    margin: 0 auto 2%;
    padding: 1% 0;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    min-height: 20vh;
}

#calmo2025-body .top-c .flex-box dl a{
    text-decoration: none;
    color: #000;
}

#calmo2025-body .top-c .flex-box dl a:hover{
    opacity: 0.6;
    text-decoration: underline;
}

#calmo2025-body .top-c .flex-box .f-box{
    border: 1px solid #000;
    text-align: left;
}

#calmo2025-body .top-c .flex-box dl dt{
	width: 90%;
    margin: 0 auto 0;
    padding: 0;
    font-size:clamp(1rem, 0.509rem + 1.45vw, 1.6rem);
    font-weight: 500;
}

#calmo2025-body .top-c .flex-box dl dd{
	width: 90%;
    margin: 0 auto;
    padding: 0;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}

#calmo2025-body .top-c .flex-box dl dd h3{
	width: 100%;
    margin: 0 auto 0;
    padding: 0;
    font-size:clamp(1rem, 0.509rem + 1.45vw, 1.6rem);
    font-weight: 500;
}
#calmo2025-body .top-c dl .step{
	width: 10%;
    margin: 0 auto 0;
    padding: 2% 0 1%;
    border: 0.1vh solid #000;
    font-weight: bold;
    font-family: Helvetica Neue LT Std, serif;
    font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}

#calmo2025-body .top-c dl .step em{
    display: block;
    font-style: normal;
}

#calmo2025-body .top-c dl .info{
	width: 80%;
    margin:0 4% 0 0;
    text-align: left;
}

#calmo2025-body .top-c dl .info h3{
    margin: 0 0 0.5%;
    padding: 0;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-family: ヒラギノ明朝,Bodoni, serif;
    font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
}

#calmo2025-body .contact,#calmo2025-body .next{
	width: 100%;
    padding: 0;
    margin: 2% 0 4%;
    background-color: #e6e6e6;
    border-radius: 1vw;
    text-align: center;
}

#calmo2025-body .contact a{
    display: block;
}

#calmo2025-body .contact img{
    width: 14%;
    vertical-align: middle;
}

#calmo2025-body .next a{
    display: block;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    color: #000;
    text-decoration: none;
    padding: 2% 0;
}

@media screen and (max-width: 750px) {
#calmo2025-body{
	width: 100%;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	padding: 0 0 6%;
	margin: 0;
    

}
#calmo2025-body header{
    position: fixed;
  top: 0;
  z-index: 10000;
    width: 100%;
    }
#calmo2025-body h1{
	width: 60%;
	padding: 0 0;
    margin: 0;
    background-color: #fff;
}
    #calmo2025-body h1 dl dt img{
        width: 90%;
    }
    
#calmo2025-body h1 dl dd {
    margin: 2% 0 0;
}
    
#calmo2025-body #contact{
	width: 20%;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	padding:  0;
    margin: 0;
    background-color: #fff;
    display: flex;
	justify-content: center;
  align-items: center;
}
    
#com-info{
    width: 100%;
	padding:0 0;
    margin: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    
    #com-info dl dt a{
        padding: 6% 0;
        
    }
    
#com-info dl .takumi img{
    width: 60%;
}

#com-info dl .sns img{
    width: 18%;
}

footer{
	width: 100%;
	padding: 4% 0;
	margin: 0;
	color: #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #87b2e0;
    text-align: center;
}

#calmo2025-body #main-top {
    width: 100%;
    margin: 0;
    padding: 13.4% 0 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#calmo2025-body .top-c dl{
	width: 100%;
    display:block;
}
    
#calmo2025-body .top-c .flex-box{
	width: 100%;
    margin: 0;
    padding: 0;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
}


#calmo2025-body .top-c .flex-box dl{
	width: 100%;
    margin: 0 auto 2%;
    padding: 1% 0;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 8vh;
}

#calmo2025-body .top-c dl .step{
	width: 30%;
    margin: 2% 0 0 5%;
    
}
    
#calmo2025-body .top-c dl .step em{
    display: inline-flex;
}
    
#calmo2025-body .top-c dl .info{
	width: 90%;
    margin: 2% auto;
}
    
#calmo2025-body #contact img{
    max-width: 100%;
}
    
#calmo2025-body .contact img{
    width: 20%;
}
}

#calmo2025-body .ban-90_b {
    width: 90%;
    margin: 1% auto;
    padding:0;
    background-color: #005bac;
    border-radius:0.4vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

#calmo2025-body .ban-90_g {
    width: 90%;
    margin: 1% auto;
    padding:0;
    background-color: #e6e6e6;
    border-radius:0.4vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

#calmo2025-body .ban-90_b a{
    width: 100%;
    padding: 2% 0;
    display: block;
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
#calmo2025-body .ban-90_g a{
    width: 100%;
    padding: 2% 0;
    display: block;
    color: #000;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

#calmo2025-body .ban-90_g span{
    width: 12%;
    margin: 0 auto;
    padding: 0;
    display: block;
}

#calmo2025-body .ban-90_g span img{
    width: 100%;
    margin: 0 auto;]
     padding: 0;
    vertical-align: middle;
}


/*次ページ*/
#calmo2025-body #cal-next-box{
    width: 100%;
    margin: 0 auto;
    padding:10% 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mt2 {
    margin: 2% 0 0 0;
}

#calmo2025-body .next-main img {
    width: 100%;
    vertical-align: middle;
}

#calmo2025-body #cal-next-box #f-info {
    width: 96%;
    margin: 0 auto;
    padding:2% 0 5%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
}

#calmo2025-body #cal-next-box #f-info p {
    margin: 0;
    padding:0;
}

/*次ページ*/
#calmo2025-body #cal-next-box #kyu-menu{
    width: 100%;
    margin: 4% auto;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
}

#calmo2025-body #cal-next-box #kyu-menu li{
    width: 32%;
    margin: 1% auto 0;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border-radius:0.4vw;
}

#calmo2025-body #cal-next-box #kyu-menu .clm-product{
    width: 65%;
   margin: 1% auto 0;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border-radius:0.4vw;
}


#calmo2025-body #cal-next-box #calmoform-box{
    width: 96%;
    margin: 4% auto;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
	justify-content: center;
  align-items: center;
}

#calmo2025-body #cal-next-box #calmoform-box div{
    width: 50%;
    margin: 4% auto 0;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


#calmo2025-body #cal-next-box #calmoform-box h3 {
    background-image: url(../images/logo.jpg);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%, contain;
    margin: 0;
    width: 50%;
    font-size: 5vw;
    padding: 8% 0;
    display: table-cell;
}

#calmo2025-body #cal-next-box .ban-50{
    width: 50%;
}

#calmo2025-body #cal-next-box .ban-50 a{
    padding: 4% 0;
}

#calmo2025-body #cal-next-box .img-50{
    width: 50%;
    margin: 5% auto;
}

#calmo2025-body #cal-next-box .width-96{
    width: 90%;
    margin: 2% auto;
}

#calmo2025-body #cal-next-box .crm-box{
    width: 96%;
    margin: 6% auto;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
	justify-content: center;
  align-items: center;
    font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
}


#calmo2025-body #cal-next-box .crm-box dd ul{
    width: 96%;
    margin: 6% auto;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
	justify-content: center;
  align-items: center;
    font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
}


#calmo2025-body #cal-next-box .crm-box dd ul li{
	width:40%;
	background-color: #185ba3;
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size:1.6vw;
	margin:0 0 0 2%;
    border-radius: 0.4vw;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    list-style-type: none;
}

#calmo2025-body #cal-next-box .crm-box dd ul li a{
	width:100%;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 5% 0;
}

#calmo2025-body #cal-next-box .crm-box dt{
	width:45%;
	margin-right:5%;
}

#calmo2025-body #cal-next-box .crm-box dt img{
	width:100%;
    vertical-align: middle;
}
#calmo2025-body #cal-next-box .crm-box dd{
	width:50%;
	font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

#calmo2025-body #cal-next-box .crm-box dd h5{
	text-align:center;
	padding:2% 0 3% 0;
}

#calmo2025-body #cal-next-box .crm-box dd h5 img{
	width:55%;
}


#calmo2025-body #cal-next-box #step-box{
    width: 100%;
    margin: 4% auto;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#calmo2025-body #cal-next-box #step-box dl{
    width: 100%;
    margin: 0;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
	justify-content: center;
  align-items: normal;
}

#calmo2025-body #cal-next-box #step-box dl dt{
	width:10%;
    margin: 0 2% 2% 2%;
    padding: 2% 0;
    font-weight: bold;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    border: 1px solid #000;
    text-align: center;
    font-family: Arial, Helvetica, "sans-serif";
    line-height: 100%;
    max-height: 18vh;
        -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#calmo2025-body #cal-next-box #step-box dl dt span{
    display: block;
    
}



#calmo2025-body #cal-next-box #step-box dl dd{
	width:70%;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}

#calmo2025-body #cal-next-box #step-box dl dd h3{
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 30px solid #000;
  border-bottom: 0;
    margin: 2% auto 2%;
}

.triangle2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 30px solid #000;
  border-bottom: 0;
    margin: 0 auto 2% ;
}
#calmo2025-body #cal-next-box #step-box table{
    width: 86%;
    margin: 4% auto;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    border-collapse: collapse;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

#calmo2025-body #cal-next-box #step-box table th{
    width: 30%;
    padding: 1% 0;
}

#calmo2025-body #cal-next-box #step-box table .g01{
    background-color: #f5f5f5;
    border: 1px solid #000;
    font-weight: normal;
}

#calmo2025-body #cal-next-box #step-box table .g02{
    background-color: #dedede;
    border: 1px solid #000;
}
#calmo2025-body #cal-next-box #step-box table .b01{
    background-color: #005bac;
    border: 1px solid #000;
    color: #fff;
}

#calmo2025-body #cal-next-box #step-box table td{
    padding: 4% 0;
    border: 1px solid #000;
}

.fw{
    font-weight: bold;
}

#calmo2025-body #cal-next-box #step-box table .boder-none{
    border: none;
}


#calmo2025-body #cal-next-box #cal-pick{
    width: 100%;
    margin: 0 auto;
    padding: 2%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.big-t{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

#crm_point2{
	width: 96%;
	margin: 2% auto;
	display: flex;
	justify-content: center;
  align-items: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#crm_point2 li{
	width: 30%;
	margin: 0 1% 1%;
	background-color: #fff;
	font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
	padding: 2% 0;
	list-style: none;
    border: 1px solid #000;
    min-height: 38vh;

}

#crm_point2 li dl{
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

#crm_point2 li dl dt{
    margin: 0;
    padding: 0;
    text-align: center;
}

#crm_point2 li dl dt img{
	width: 80%;
    vertical-align: middle;
}

#crm_point2 li dl dd{
	width: 100%;
	margin: 4% auto 0;

}

#crm_point2 li dl dd span{
    color: #ea2636;
}

#calmo2025-body #cal-next-box #h-list{
    width: 96%;
    margin: 2% auto;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
}

#calmo2025-body #cal-next-box #h-list li{
    width: 48%;
    margin: 2% auto;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
}

/*導入事例*/
#calmo2025-body #cal-next-box .crm-do{
    width: 96%;
    margin: 2% auto;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
	justify-content: center;
  align-items: center;
    font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
}

#calmo2025-body #cal-next-box .crm-do dt{
	width:100%;
    font-weight: bold;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    margin: 0 auto;
}

#calmo2025-body #cal-next-box .crm-do dd{
	width:48%;
    padding: 1%;
	font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}

#calmo2025-body #cal-next-box .crm-do dd img{
	width:100%;
    vertical-align: middle;
}


@media screen and (max-width: 750px) {
    
#calmo2025-body #cal-next-box{
    margin: 0 auto;
    padding: 18% 0 0;
}
#calmo2025-body .ban-90_g span{
    width: 30%;
    margin: 0 auto;
    padding: 0;
    display: block;
}

#calmo2025-body .ban-90_g span img{
    width: 100%;
    margin: 0 auto;]
     padding: 0;
    vertical-align: middle;
}

#calmo2025-body #cal-next-box #kyu-menu li{
    width: 100%;
    margin: 0 auto 2%;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
    
#calmo2025-body #cal-next-box #kyu-menu .clm-product{
    width: 100%;
    margin: 0 auto 2%;
    padding: 0 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}
    
#calmo2025-body #cal-next-box .crm-box,
#calmo2025-body #cal-next-box .crm-do{
    display: block;
}
#calmo2025-body #cal-next-box .crm-box dt,#calmo2025-body #cal-next-box .crm-box dd
#calmo2025-body #cal-next-box .crm-do dt,#calmo2025-body #cal-next-box .crm-do dd{
	width:100%;
}
    
#calmo2025-body #cal-next-box .crm-box dd ul li a{
    padding: 10% 0;
}
    
#calmo2025-body #cal-next-box #step-box dl{
    width: 90%;
    margin: 4% auto;
    padding: 0 0;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#calmo2025-body #cal-next-box #step-box dl dt{
	width:100%;
    margin: 0 0 2% 0;
    padding: 1.5% 0;
    font-weight: bold;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    border: 1px solid #000;
    text-align: center;
}

#calmo2025-body #cal-next-box #step-box dl dt span{
    display:inline-flex;
    margin: 0;
    padding: 0;
}

#calmo2025-body #cal-next-box #step-box dl dd{
	width:100%;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}
#crm_point2{
	width: 96%;
	margin: 2% auto;
    display: flex;
	justify-content: center;
  align-items: center;
    flex-wrap :wrap;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#crm_point2 li{
	width: 44%;
	margin: 0.5%;
	background-color: #fff;
	font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
	padding: 2%;
	list-style: none;
    border: 1px solid #000;
    min-height: 22vh;

}   
#crm_point2 li dl dd{
	width: 98%;
	margin: 4% auto 0;

}
    
#calmo2025-body #cal-next-box #h-list li{
    width: 100%;
}
}


/*FAQ*/
#calmo2025-body #cal-next-box #faq div {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 2% auto;
	font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
	border-bottom: 0.1vh solid #fff;
    text-align: left;
}


#calmo2025-body #cal-next-box #faq div input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
#calmo2025-body #cal-next-box #faq div label {
	position: relative;
	display: block;
	cursor: pointer;
	padding: 1% 0 1% 2% ;
	margin: 0;
    background-color: #e6e6e6;
    background-repeat: no-repeat;
    background-position:left center;
    background-size: 10%;
    font-weight: bold;
	
}

#calmo2025-body #cal-next-box #faq div label.ap-faq::before {
    content: 'Q.';
    font-weight: bold;
    margin: 0 1% 0 0;
}


#calmo2025-body #cal-next-box #faq div .faq-content {
	overflow: auto;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	width: 96%;
	padding: 0 0 0;
	margin: 0 auto;
	font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}

#calmo2025-body #cal-next-box #faq div dl.faq-content dt {
	padding: 0 0 0;
	margin: 2% 0 ;
}


#calmo2025-body #cal-next-box #faq div dl.faq-content dd {
	padding: 0 0 0;
	margin: 0 0 2% 0;
}

#calmo2025-body #cal-next-box #faq div dl.faq-content dd b {
	display: block;
}

/* :checked */
#calmo2025-body #cal-next-box #faq div input:checked ~ .faq-content {
	max-height: 20em;
}


#calmo2025-body #contact-box{
	width: 90%;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	margin: 4% auto;
    padding: 0;
    color: #005bac;
}

#calmo2025-body #contact-box h3{
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

/* アグリフォーム */

#agr-form{
	width: 96%;
	margin: 2% auto 4%;
	padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#agr-form .info{
	width: 100%;
	margin:2% auto;
	padding: 0;
	font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
    line-height: 160%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#agr-form .info em,
#agr-form .info2 em{
    font-weight: bold;
    text-decoration: none;
    font-style: normal;
}

#agr-form ul{
	width: 100%;
    margin:4% auto 0;
	padding: 0;
	display: flex;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: left;
  align-items: top;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
    list-style-type: none;
}

#agr-form ul .img{
	width: 50%;
	padding: 0;
    margin: 0 2% 0 0;
}

#agr-form ul .img img{
	width: 100%;
    vertical-align: middle;
}

#agr-form ul .text{
	width: 50%;
	padding: 0;

}

#agr-form ul .text .read{
    font-weight: bold;
    line-height: 140%;
}


#agr-form ul .text table{
	width: 100%;
	padding: 0;
    margin: 2% 0 0 ;
    border: 0.2vh solid #000;
    border-collapse: collapse;
}

#agr-form ul .text table th,#agr-form ul .text table td{
	padding: 1%;
    margin: 0;
    border: 0.2vh solid #000;
 }   
 
#agr-form ul .text .chui{
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
    line-height: 140%;
    margin: 2% 0;
     text-indent: -1em;
  padding-left: 1em;
}

#agr-form h3{
    width: 80%;
    margin: 4% auto 0;
    padding: 1% 0;
     font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    text-align: center;
    font-weight: bold;
    border-bottom: 0.2vh solid #000;
}

#agr-form h4{
    width: 80%;
    margin: 0 auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1% 0 0;
     font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    font-weight: bold;
     line-height: 160%;
    text-align: center;
}

#agr-form h4 em{
    color: #b70202;
    margin: 0 2% 0 0;
    font-style: normal;
}


#agr-form ul .il-01{
	width: 50%;
	padding: 0;
    margin: 0 2% 0 0;
    border: 0.4vh solid #2183c2;
}

#agr-form ul .il-02{
	width: 50%;
	padding: 0;

}

#agr-form ul .il-01 dl,
#agr-form ul .il-02 dl{
	width: 90%;
    margin:4% auto 2%;
	padding: 0;
	display: flex;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: left;
  align-items: center;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    line-height: 140%;
}

#agr-form ul .il-01 dl dt,
#agr-form ul .il-02 dl dt{
	width: 30%;
    margin: 0 2% 0 0;
}

#agr-form ul .il-01 dl dt img,
#agr-form ul .il-02 dl dt img
{
	width: 100%;
    vertical-align: middle;
}

#agr-form ul .il-01 dl dd,
#agr-form ul .il-02 dl dd{
	width: 70%;
    font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
}

#agr-form ul .il-01 dl dd em,
#agr-form ul .il-02 dl dd em{
	font-weight: bold;
    line-height: 140%;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    display: block;
    margin: 0 0 2% 0;
    font-style: normal;
}

#agr-form .info2{
	width: 94%;
	margin:2% auto;
	padding: 0;
	font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
    line-height: 160%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#agr-form h5{
	width: 94%;
	margin:4% auto 2%;
	padding: 0 0 1%;
	font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
	text-align: center;
    color: #000;
    font-weight: bold;
    border-bottom: 0.2vh solid #000;
}

#agr-form .agr-dairi{
	width: 90%;
	margin:4% auto;
	padding: 0;
	font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
    line-height: 160%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#agr-form .agr-dairi dt{
    font-weight: bold;
    line-height: 140%;
}

@media screen and (max-width: 750px) {
    #agr-form ul{
	width: 100%;
    margin:4% auto 0;
	padding: 0;
	display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    #agr-form ul .img,#agr-form ul .text {
    width: 100%;
    padding: 0;
    margin: 0 0 0;
}
#agr-form ul .il-01,#agr-form ul .il-02 {
    width: 100%;
    margin: 0 0 5% 0;
    display: block;
}
 }

/*　calmofoam 商品詳細*/
#calmo-01{
	width:90%;
	padding:0;
	margin:0 auto 0;
	font-size:1.8vw;
	line-height: 3.0vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


#calmo-02{
	width:90%;
	padding:0;
	margin:7% auto 0;
	line-height: 3.0vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#calmo-01 .calmo-info-read{
	width:100%;
	padding:0;
	margin-top:5%;
	display:table;
}

#calmo-01 .calmo-info-read dt{
	width:30%;
	margin:0;
	float:left;
	display:table-cell;
}

#calmo-01 .calmo-info-read dt img{
	width:99%;
	padding-top:10%; 
}


#calmo-01 .calmo-info-read dd{
	width:67%;
	float:right;
	margin:0 0 0 3%;
	display:table-cell;
}


#calmo-01 .calmo-info-read dd h3{
	background-image: url(../images/logo.jpg);
    overflow: hidden;
    text-indent: 100%;
	white-space: nowrap;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%,contain;
    margin: 0;
    width: 60%;
    font-size: 5vw;
	padding:8% 0;
    display: table-cell;
}



#calmo-01 .calmo-info-ex3{
	width:90%;
	padding:0;
	margin:5%;
	display: flex;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    justify-content: center;
  align-items: center;
    list-style-type: none;
}

#calmo-01 .calmo-info-ex3 li h3 img{
	width:90%;
}

#calmo-01 .calmo-info-ex3 li h3 a:visited,
#calmo-01 .calmo-info-ex3 li h3 a:link{
	display:block;
	text-decoration: none;
}

#calmo-01 .type-box{
	width:100%;
	padding:5% 5% 0 5%;
	margin:3% 0%;
	border:0.3vw solid #eee;
	display:table;
	box-sizing:border-box;
}

#calmo-01 .type-box dl{
	margin:0 0 5% 0;
}

#calmo-01 .type-box dl .date-img{
	width:40%;
	margin:0 5% 0 0;
	padding:0;
	display:table-cell;
	float:left;
}


#calmo-01 .type-box dl .date-img img{
	width:100%;
}

#calmo-01 .type-box dl .type-date{
	width:55%;
	font-size:1.6vw;
	display:table-cell;
	float:right;
}

#calmo-01 .type-box dl .type-date p{
	font-size:1.6vw;
	margin:2% 0;
}

#calmo-01 .type-box dl .type-date h4{
	font-size:1.8vw;
	font-weight:bold;
}

#calmo-01 .type-box dl .type-date ul li{
	font-size:1.4vw;
    list-style-type: none;
}

#calmo-01 .type-box dl .type-date ul li span{
	font-weight:bold;
}


#calmo-01 .type-box dl .type-date table{
	width:100%;
	padding:0;
	margin:0;
	font-size:1.4vw;
}

#calmo-01 .type-box dl .type-date table th{
	text-align:left;
	width:45%;
	font-weight:bold;
}

#calmo-01 .type-box-2{
	width:98%;
	margin:3% 0 3% 2%;
	display:table;
}

#calmo-01 .type-box-2 .date-img{
	width:35%;
	margin:0;
	padding:0;
	display:table-cell;
	float:left;
}


#calmo-01 .type-box-2 .date-img img{
	width:100%;
}

#calmo-01 .type-box-2 .type-date{
	width:63%;
	margin-left:2%;
	display:table-cell;
	float:right;
	font-size:1.6vw;
}

#calmo-01 .type-box-2 .type-date ul{
	list-style: none;
	padding-left:1%;
}

#calmo-01 .type-box-2 .type-date ul li:before{
	background-color: #313131;
	content: "";
    width: 0.6vw;
    height: 0.6vw;
    display: inline-block;
    border-radius: 50%;
    position: relative;
	top:-2px;
    margin-right: 1%;
}

#calmo-01 .type-box-2 .type-date .p-bold{
	font-weight:bold;
	font-size:1.8vw;
	margin:2% 0 0 0;
}

#calmo-01 .type-box-2 .type-date .p-small{
	font-size:1.4vw;
}

/*　calmofoam calmfoamとは　20211018*/

#calmo-02 h3{
	font-size:3.0vw;
	color:#003d90;
	font-weight:bold;
	background-color: #fff;
	text-align:center;
	background-size: 25%;
	margin-top:5%;
	background-image: url("../images/decoration_1.png"),url("../images/decoration_2.png");
	background-repeat: no-repeat;
	background-position:left center,right center;
}

#calmo-02 h3 span{
	background-color: #fff;
    padding: 0 3%;
	font-weight:bold;
}

#calmo-02 .tokucho_list_sec{
	background-color:#f5f5f5;
	padding:2% 0;
	margin:2% 0;
	display:table;
	width:100%;
}

#calmo-02 .tokucho_list_sec .sec_num{
	background-color:#f5f5f5;
	font-size:4vw;
	font-weight:bold;
	color:#a6b0d4;
	display:table-cell;
	float:left;
	width:8%;
	border-right:solid 0.1vw #8b8b8b;
	box-sizing: border-box;
	text-align: center;
}

#calmo-02 .tokucho_list_sec .topic-explane{
	font-size:1.6vw;
	width:90%;
	padding-left:2%;
	float:right;
	display:table-cell;
}

#calmo-02 .tokucho_list_sec .topic{
	font-size:2.0vw;
	font-weight:bold;
	color:#003d90;
	padding:0 0 1% 0;
}

.blue_notes{
	font-size:1.6vw;
	text-align:left;
	border:solid 0.3vw #003d90;
	border-radius:0.5vw;
	margin:3% 0;
	padding:2%;
	box-sizing:border-box;
	line-height:3.0vw;
	width:100%;
}

.red_notes{
	font-size:1.6vw;
	text-align:left;
	border:solid 0.3vw #B90000;
	border-radius:0.5vw;
	margin:2% 0 3% 0;
	padding:2%;
	box-sizing:border-box;
	line-height:3.0vw;
	width:100%;
}

.red_notes span{
	color:#B90000;
	font-weight:bold;
}

.red_notes .red_notes_l10{
	padding-left:3.5%;
}

#calmo-02 .calmo_info_why{
	width:100%;
	padding:3% 0 0 0;
}

#calmo-02 .calmo_info_why h4{
	color:#003d90;
	font-size:2.0vw;
	font-weight:bold;
	background-color:#e9efff;
	padding:2%;
	margin:0 0 2% 0;
	border-radius:1.2vw;
}

#calmo-02 .calmo_info_why p{
	margin:0 2% 1% 2%;
	font-size:1.6vw;
	line-height:2.5vw;
	width:96%;
}

#calmo-02 .calmo_info_why .bold{
	font-weight:bold;
}

#calmo-02 .calmo_info_why .cell_3d{
	margin:2% 0;
}

#calmo-02 .calmo_info_why .cell_3d h5{
    font-size: 1.8vw;
	font-weight:bold;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2% 0 2%;
    padding: 1% 0;
	width:96%;
}

#calmo-02 .calmo_info_why .cell_3d h5:before{
	content: '■';
    color: #003d90;
    margin-right: 1%;
}

#calmo-02 .calmo_info_why .cell_3d p{
	font-size: 1.6vw;
	width:96%;
	margin: 0 2% 0 2%;
}

#calmo-02 .calmo_info_why .cell_3d figcaption{
	font-size:1.4vw;
	padding:1% 0;
}
#calmo-02 .calmo_info_why .cell_3d .cell_3d_img{
	width:90%;
	margin:3% 5%;
	display:table;
}

#calmo-02 .calmo_info_why .cell_3d .cell_3d_img .cell_3d-right,
#calmo-02 .calmo_info_why .cell_3d .cell_3d_img .cell_3d-left{
	display:table-cell;
	width:45%;
}

#calmo-02 .calmo_info_why .cell_3d .cell_3d_img .cell_3d-right img,
#calmo-02 .calmo_info_why .cell_3d .cell_3d_img .cell_3d-left img{
	width:100%;
}

#calmo-02 .calmo_info_why .cell_3d .cell_3d_img .cell_3d-left{
	float:left;
	margin:0 5% 0 0;
}


#calmo-02 .calmo_info_why .cell_3d .cell_3d_img .cell_3d-right{
	float:right;
	margin:0 0 0 5%;
}

#calmo-02 #kyuon,
#calmo-02 #syaon{
	width:100%;
	margin-top:5%;
}

#calmo-02 #kyuon h4,
#calmo-02 #syaon h4{
	font-size: 2.4vw;
    font-weight: bold;
    background-size: 6%;
	text-align: left;
    margin: 0;
	padding:1.8% 0 1.8% 10%;
	border-radius:1.2vw;
    background-repeat: no-repeat;
    background-position: left center;
}


#calmo-02 #kyuon h4{
	color: #003d90;
	background-color: #e9efff;
	background-image: url(../images/kyu-icon.png);
}
#calmo-02 #syaon h4{
    color: #3a960f;
    font-weight: bold;
    background-color: #f2ffe5;
    background-image: url(../images/sya-icon.png);
}

#calmo-02 #syaon .k_s_list,
#calmo-02 #kyuon .k_s_list{
	width:95%;
	margin:3% 0 5% 5%;
	padding:0;
	text-align:left;
}

#calmo-02 #syaon .k_s_list ul,
#calmo-02 #kyuon .k_s_list ul{
	list-style:none;
	margin:0;
	padding:0;
	line-height: 4.0vw;
	font-size:1.6vw;
	
}


#calmo-02 #kyuon .k_s_list ul li:before{
	background-color: #003d90;
	content: "";
    width: 0.8vw;
    height: 0.8vw;
    display: inline-block;
    border-radius: 50%;
    position: relative;
	top:-1px;
    margin-right: 1%;
}

#calmo-02 #syaon .k_s_list ul li:before{
	background-color: #3a960f;
	content: "";
    width: 0.8vw;
    height: 0.8vw;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: -1px;
    margin-right: 1%;
}

#calmo-02 #kyuon .kyuon-date{
	width:80%;
	margin:0 10%;
}

#calmo-02 #kyuon .kyuon-date .kyuon_data_des{
	width:100%;
	margin:0 0 8% 0;
}

#calmo-02 #kyuon .kyuon-date .kyuon_data_des dt{
	font-size:1.8vw;
	font-weight:bold;
	padding:0 0 3% 0;
}

#calmo-02 #kyuon .kyuon-date .kyuon_data_des .kyuon_data_text{
	font-size:1.4vw;
}

#calmo-02 #kyuon .kyuon-date .kyuon_data_des .kyuon_data_img{
	width:100%;
	padding:0;
	margin:2% 0 0 0;
}

#calmo-02 #kyuon .kyuon-date .kyuon_data_des .kyuon_data_img img{
	width:100%;
}

#calmo-02 #syaon .syaon_t{
	width:90%;
	margin:0 5% 0 5%;
}

#calmo-02 #syaon .syaon_t table{
    text-align: center;
    border-collapse: collapse;
    box-sizing: border-box;
	width:100%;
	margin:0 auto;;
}

#calmo-02 #syaon .syaon_t table th{
	border:solid 0.1vw #8b8b8b;
	padding:1%;
	font-size:1.6vw;
}

#calmo-02 #syaon .syaon_t table td{
	border:solid 0.1vw #8b8b8b;
	padding:1%;
	font-size:1.6vw;
}

#calmo-02 #syaon .syaon_t img{
	width:80%;
	margin:5% 10%;
}


#calmo-03{
	width:90%;
	padding:0;
	margin:5% auto 0;
	line-height: 2.5vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#calmo-03 h4{
	display: inline-block;
    font-size: 1.8vw;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.05vw;
    background: #ad2f2f;
    border-radius: 0.3vw 0.3vw 0 0;
    padding: 1% 2%;
    margin: 0;
}

#calmo-03 .toriatsukai_red{
	border:solid 0.3vw #ad2f2f;
	border-radius: 0 0.3vw 0.3vw 0.3vw
	padding:4% 0 2% 0;
	font-size:1.6vw;
	line-height: 3.0vw;
	box-sizing:border-box;
}

#calmo-03 .toriatsukai_red ol{
	list-style-type:decimal;
	margin:0 2% 0 5%;
}

#calmo-03 .toriatsukai_red p{
	list-style-type:none;
	margin:2% 3% 3% 3%;
}

.new{
    background-color: #DB282B;
    color: #fff;
    margin: 0 0 0 2%;
    padding: 1%;
}

/* 2025.11.19 トピックス*/

#info-topics{
    width: 92%;
    margin: 2% auto 0;
    
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 0.15vh solid #000;
}

#info-topics h2{
    width: 100%;
    background-color: #005daa;
    color: #fff;
    text-align: center;
    font-size:clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
    padding: 0.5% 0;
    font-weight: bold;
}

#info-topics dl{
    width: 90%;
    margin: 1% auto;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}

#info-topics dl dt{
    width: 100%;
    margin: 0 auto;
    font-weight: bold;
}



/*メニュー*/
  
.c-header {
  align-items: center;
  -moz-box-sizing: border-box;
    box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 0; /* カスタマイズしてください */
  width: 100%;
    
}

.c-header__logo {
  color: #000; /* カスタマイズしてください */
  text-decoration: none;
display: flex;
	justify-content: center;
  align-items: center;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
	justify-content: center;
  margin: 0;
  padding: 0;
    width: 60%;
}

.c-header__list-item {
  background-color: #005bac;
    display: flex;
	justify-content: center;
  align-items: center;
    width: 25%;
    border-right: 0.1vh solid #fff;
}

.c-header__list-link {
  color: #fff; /* カスタマイズしてください */
  
  margin:0; /* カスタマイズしてください */
  text-decoration: none;
  padding: 0; /* カスタマイズしてください */
    
}

.c-header__list-link:link {
    text-align: center;
  width: 100%;
    display: block;
    padding: 16% 0;
}


.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}
.c-hamburger-menu {
  position: relative;
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

.c-hamburger-menu__button-mark {
  background-color: #fff; /* カスタマイズしてください */
  display: block;
  height: 0.2vh; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 40%; /* カスタマイズしてください */
}

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

.c-header__list-item {
  background-color: #005bac;
    width: 100%;
    border-bottom: 0.1vh solid #fff;]
        align-items: center;
        padding: 0;
}


    .c-header__list-link:link {
    text-align: center;
  width: 100%;
    display: block;
    padding: 4% 0;
}

  .c-hamburger-menu__list {
    background-color: #000; /* カスタマイズしてください */
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 0; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
    
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12%; /* カスタマイズしてください */
    justify-content: center;
    width: 20%; /* カスタマイズしてください */
      background-color: #005bac;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}

/*フェードイン*/
.fade-in {
    /* アニメーションの命令 */
    animation: scrollAnime linear;
    animation-timeline: view();
    animation-range: entry;
}

@keyframes scrollAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 80;
    }
}