/*reset*/
* {margin: 0;padding: 0;box-sizing: border-box;}
a {text-decoration : none}
ul, ol {list-style : none}
img {vertical-align : middle;max-width:100%;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 1em;}
.grecaptcha-badge { visibility: hidden; }

/*common class*/
.fs06{font-size:0.6rem !important;}
.fs08{font-size:0.8rem !important;}
.fs09{font-size:0.9rem !important;}
.fs1{font-size:1rem !important;}
.fs12{font-size:1.2rem !important;}
.fs15{font-size:1.5rem !important;}
.fs2{font-size:2rem !important;}
.fs3{font-size:3rem !important;}

.bold {font-weight: bold;}
.white{color:#fff;}


.tac {text-align: center !important;}
.tar {text-align: right !important;}
.tal {text-align: left !important;}
.fl {float: left;}
.fr {float: right;}

.mb0 {margin-bottom:0px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb50 {margin-bottom:50px !important;}
.mb100 {margin-bottom:100px; !important;}

.cb{clear:both;}

.pc_show{display:block;}
.sp_show{display:none;}

.cf:after {
    content:" ";
    display:block;
    clear:both;
}

.aligncenter{
display:block;
margin:0 auto 25px auto;
}
.alignleft{
float:left;
margin:0 25px 25px 0;
}
.alignright{
float:right;
margin:0 0px 25px 25px;
}

.flex{
display:flex;
justify-content: space-between;

}
.flex_rev{
display:flex;
flex-direction: row-reverse;
justify-content: space-between;

}
.col2{
width:48%;
}
.col3{
width:30%;
}
.imgcorner{border-radius:10px;}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iPhoneで滑らかに */
}


.container{
max-width:960px;
margin:0 auto;
}
.btn{
background:#F74632;
color:#fff;
font-size:18px;
font-weight:bold;
padding:10px 20px;
border-radius:5px;
}
.fredora{
font-family: "Fredoka", sans-serif;
}
.borderbox{
border:2px solid #7fcdc7;
border-radius:10px;
padding:20px;
background:#fff;
}
.bulletlist > li{
list-style:disc;
margin-left:1em;
margin-bottom:1em;
}
.numberlist > li{
list-style:decimal;
margin-left:1em;
margin-bottom:1em;
}

.checklist > li{
position: relative;
padding-left: 18px;
margin-bottom:10px;
}
 
.checklist > li:before {
content: "";
position: absolute;
top: .1em;
left: 0;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
width: 5px;
height: 10px;
border-right: 3px solid #7fcdc7;
border-bottom: 3px solid #7fcdc7;
}
.crosslist > li{
  position: relative;
  padding-left: 20px;
  margin-bottom:10px;
}

.crosslist > li::before,
.crosslist > li::after{
  content:"";
  position:absolute;
  top:0.45em;
  left:0;
  width:12px;
  height:2px;
  background:#e25a5a;
}

.crosslist > li::before{
  transform:rotate(45deg);
}

.crosslist > li::after{
  transform:rotate(-45deg);
}

.page_title{
text-align:center;
color:#fff;
background:#7fcdc7;
padding:100px 0px;
font-size:5rem;
letter-spacing:0.2em;
font-family: "Fredoka", sans-serif;
}
.line_title{
font-size:3rem;
font-weight:bold;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom:100px;
}
.line_title::before,.line_title::after{
content: "";
flex: 1;
height: 2px;
background: #666;
}

/*tag*/
html {
font-family: "Roboto","Arial", sans-serif;
font-size:16px;
line-height : 1.5;
letter-spacing: 0.1em;
color: #000;
}
body{
margin:0;
}
a{color:#005bac;}
a:hover{color:#fd714e;}
img{max-width:100%;}
p{margin-bottom:1rem;}

section{
padding:100px 50px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
sup{color:#c00;}

/*header*/
header{
display:flex;
justify-content: space-between;
align-items:center;
padding:20px 50px;
position:fixed;
background:rgba(255,255,255,1);;
width:100%;
z-index:5;
}
header h1{
width:160px;
}
header nav{

}
nav ul{
display:flex;
}
nav li{
margin-left:20px;
}
nav a{
color:#000;
}
.sp_nav_open, .sp_nav_close{
display:none;
}
footer{
background:#eaeaea;
padding:50px 20px 20px 20px;
}
footer .logo{
width:200px;
}
footer .nav{
width:200px;
}

footer .nav a{
color:#000;
font-size:14px;
}

/*page*/

/*about*/
#about #sec01{

}
#about #sec01 .logo{
max-width:600px;
margin:0 auto 50px auto;
}
#about #sec01 table{
}
#about #sec01 th{
width:200px;
text-align:right;
font-weight:normal;
vertical-align:top;
}
#about #sec01 td{
padding:0px 0px 20px 20px;
}

#about #sec02{
background:#fff;
}
#about #sec03{
background:#f5f9fa;
}
#about #sec03 .photo{
max-width:300px;
margin:0 auto;
}
#about #sec03 .text{
width:calc(100% - 320px);
}

#about #sec04{
background:#fff;
}
#about #sec04 .flex{align-items:center;}

#about #sec04 .logo{
max-width:300px;
margin:0 auto;
}
#about #sec04 .text{
width:calc(100% - 320px);
}

/*products*/
#products #sec01 .photo{width:48%;}
#products #sec01 .text{width:48%;}
#products #sec02 .photo{width:30%;}
#products #sec02 .text{width:48%;}
#products #sec03{background:#f5f9fa;}

/*science*/
#science #sec01{
background:url(https://cozy-milk.com/cms/wp-content/uploads/2026/03/science_sec01_bg.jpg) center center no-repeat;
background-size:cover;
}
#science #sec02 table{
border-collapse:collapse;
border:1px solid #ccc;
}
#science #sec02 th{
background:#ddd;
padding:10px;
border:1px solid #ccc;
}
#science #sec02 td{
padding:10px;
border:1px solid #ccc;
}
#science #sec03{
background:#7fcdc7;
}
#science #sec03 table{
border-collapse:collapse;
border:1px solid #ccc;
background:#fff;
width:100%;
}
#science #sec03 th{
border:1px solid #ccc;
padding:10px;
background:#f5f9fa;
}
#science #sec03 td{
border:1px solid #ccc;
padding:10px;
}

#science #sec04{
background:url('https://cozy-milk.com/cms/wp-content/uploads/2026/03/science_sec04.jpg') center center no-repeat;
background-size:cover;
padding:100px 50px 400px 50px;
}
#science #sec04 .wrap{
max-width:640px;
margin:0 auto;
}

#science #sec05{
background:#fff;
}

#science #sec06{
background:url('https://cozy-milk.com/cms/wp-content/uploads/2026/03/science_sec06_1200.jpg') center center no-repeat;
background-size:cover;
display:flex;
justify-content:right;
}
#science #sec06 .text{
background:rgba(255,255,255,0.8);
padding:20px;
width:50%;
border-radius:10px;
}
#science #sec06 .text p, #science #sec06 .text .bulletlist li{
margin-bottom:0;
}

#science #sec07{
background:url('https://cozy-milk.com/cms/wp-content/uploads/2026/03/science_sec07.jpg') center center no-repeat;
background-size:cover;
}
#science #sec08{
background:#f7f4ed;
}
#science #sec09 .flex_rev{
align-items:center;
}
#science #sec10{
background:#f5f9fa;
align-items:center;
}
#science #sec11{
background:#eee;
}
#science #sec11 .grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:50px;
}
@media screen and (max-width : 1024px) {
/*header*/
header{

}
header h1{
width:100px;
}
header nav{
display:none;
}
.sp_nav_open{
display:block;
}
nav{
display:none;
position:fixed;
top:75px;
left:0px;
width:100%;
height:100%;
background:rgba(255,255,255,0.8);
z-index:2;
align-items:center;
}
nav ul{
display:block;
text-align:center;
padding:50px 0px;
background:#fff;
}
nav li{
margin-left:0px;
font-size:18px;
}
nav a{
display:block;
padding:20px 0px;
}


}

@media screen and (max-width : 800px) {
.fs12{font-size:1rem !important;}
.fs15{font-size:1.2rem !important;}
.fs2{font-size:1.5rem !important;}
.fs3{font-size:2rem !important;}

.mb20 {margin-bottom:10px !important;}
.mb50 {margin-bottom:20px !important;}
.mb100 {margin-bottom:50px; !important;}

.pc_show{display:none;}
.sp_show{display:block;}

.flex,.flex_rev{display:block;}
.col2, .col3{width:100%;}
.col2:nth-child(1), .col3:nth-child(1),.col3:nth-child(2){margin-bottom:50px;}

.page_title{
padding:50px 0px;
font-size:3rem;
}
.line_title{
font-size:2rem;
margin-bottom:50px;
}

header{padding:20px;}
section{padding:50px 20px;}
footer .logo{margin:0px auto 20px auto}
footer .nav{width:100%;text-align:center}

/*about*/
#about #sec01 th{display:block;width:100%; text-align:left;}
#about #sec01 td{display:block}
#about #sec03 .text{width:100%;}
#about #sec04 .text{width:100%;}

/*products*/
#products #sec01 .photo{width:100%;}
#products #sec01 .text{width:100%;}
#products #sec02 .photo{width:auto;max-width:240px;margin:0 auto;}
#products #sec02 .text{width:100%;}
#products #sec03 .text{width:100%;}
#products #sec03 .text:nth-child(1){margin-bottom:20px;}

/*science*/
#science #sec04{padding:50px 0px;}
#science #sec04 .bg{padding:50px 20px 200px 20px;}
#science #sec06 .text{width:100%;}