* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: 'Frank Ruhl Libre', serif;
font-size: 1.6rem;
color: #333;
line-height: 1.6;
}
img {
max-width: 100%;
vertical-align: top;
}
video {
max-width: 100%;
}
/**/
.another-lang{
display: none;
}
header {
background: #262626;
line-height: 5rem;
}
header p{
padding-top:15px ;
height: 80px;
margin: 0;
padding-left: 10px;
color: #fff;
}
header a{
text-decoration: none;
}
nav {
clear: both;
display:none;
}
/*ハンバーガーメニュー*/
.menu-btn {
position: absolute;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #262626;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時に真ん中の線を透過する*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 80;
background-color: #262626;
}
.menu-content ul {
padding: 70px 10px 0;
}
.menu-content ul li {
border-bottom: solid 1px #262626;
list-style: none;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
color:#262626;
text-decoration: none;
padding: 9px 15px 10px 0;
position: relative;
}
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background-color: #ffff;
transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
left: 0;/*メニューを画面外へ*/
}
#main_visual {
text-align: center;
line-height: 10rem;
}
main {
background: #fff;
padding: 1rem;
}
/*mainコンテンツ*/
/*一陽染工*/
.contents-block1{
margin-bottom: 100px;
}
.cblock1-b1{
margin: 100px 0;
text-align: center;
}
.cb1{
margin: 50px 0;
}
.cb1-b2{
display: block;
margin: 0 auto;
}
.cb1-b2 img{
width: 60%;
margin: 10px;
}
.cb1 div{
display: block;
text-align: center;
}
.cb1 p{
margin: 0 auto;
width: 80%;
}
.cb1 a{
display: block;
text-align: center;
}
/*健康系製品*/
/*ファイターフィルター*/
.contents-block2{
text-align: center;
padding-top: 100px;
border-top:3px solid #262626;
}
.contents-block2 p{
margin-bottom: 100px;
}
.contents-block2 h3{
margin:20px 0 50px 0;
}
.cblock2-b1 h3{
color: #7f7f7f;
}
.cblock2-b1{
background-color: #ddebf7;
}
.cb2-contents a{
margin: 0 auto;
width: 50%;
display: block;
}
.virusfighter ,.maskfilter{
height: 250px;
margin: 20px 0;
border-radius: 10px;
background-color: #fff;
}
.virusfighter img ,.maskfilter img{
width: 70%;
padding: 20px 0;
}
.cb2{
padding: 50px 0;
}
.cb2-b1-others{
display: block;
margin-top: 30px;
color: #7f7f7f;
}
/*セルラ美貁*/
.cblock2-b2{
background-color: #efcd9a;
}
.cblock2-b2 h3{
color: #fff;
}
/*ブログ*/
.blog-wrap h2{
margin-top: 60px;
text-align: center;
}
.blog-wrap a{
margin: 0 auto;
padding: 30px 0 ;
width: 50%;
display: block;
color: #000;
text-decoration: none;
}
footer {
border-top: 3px solid #262626;
color: #262626;
padding: 1rem;
text-align: center;
}
.pagetop {
height: 50px;
width: 50px;
position: absolute;
left: 30px;
background: #fff;
border: solid 2px #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.pagetop__arrow {
position: absolute;
right:15px;
top:15px;
height: 15px;
width: 15px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: translateY(20%) rotate(-45deg);
}
@media screen and (min-width:640px) {
#wrapper {
max-width: 1000px;
margin: auto;
display: flex;
flex-flow: row wrap;
}
/*言誁*/
.another-lang{
display: block;
}
.another-lang a{
padding: 10px 20px;
color:#fff;
transition: background .5s ease;
}
.another-lang a:hover{
background-color: #bbb;
}
.another-lang ul{
margin: 0;
padding: 0;
float: right;
list-style: none;
}
.another-lang li{
float: left;
}
.site-name{
float: left;
}
header {
flex: 1 1 100%;
}
.hamburger-menu{
display: none;
}
nav {
display: block;
background: #262626;
}
nav a {
display: block;
color: #fff;
text-align: center;
text-decoration: none;
transition: background .5s ease;
}
nav a:hover {
background: #bbb;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
nav li {
flex: 1 1 15%;
}
#main_visual {
flex: 1 1 100%;
}
main {
flex: 1 1 75%;
order: 2;
}
/*mainコンテンツ*/
/*一陽染工*/
.cblock1-b1{
margin: 150px 0;
}
.cb1-b2 {
display: flex;
}
.cb1-b2 img{
width: 40%;
}
.cb1 a{
display: block;
text-align: right;
}
/*健康*/
.contents-block2 h3{
font-size: 35px;
}
.cb2-contents{
display: flex;
}
.cb2-contents a{
width: 40%;
}
.virusfighter ,.maskfilter{
height: 300px;
}
.cb2-b1-others{
display: block;
margin-top: 30px;
padding-right: 20px;
text-align: right;
color: #7f7f7f;
}
/*ブログ*/
.blog-wrap h2{
text-align: left;
}
.blog-contents-wrap{
display: flex;
}
.blog-wrap a{
width: 30%;
}
footer {
flex: 1 1 100%;
order: 3;
}
}