@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #43a4dc ;
    --back-color: #43a4dc;
    --border-color: #ccc;
    --white-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: var(--base-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}
a img {
    margin-bottom: 1rem;
}
a img:hover {
	opacity: 0.8;
}

.underline {
	border-bottom: 3px solid var(--back-color);
	padding-bottom: 0.5rem;
}
.center {
	text-align: center;
}

/*ヘッダー-------------------------------------*/
.head {
    padding: 1rem 0 0 0;
}

.head h1 { 
    padding: 1rem 0;
}
.menu {
	background-color: var(--white-color);
	position: sticky;
	top: 0; /* 上部に配置 */
	width: 100%; /* 画面幅全体に広げる */
	z-index: 30;
}
nav ul {
	display: flex;
    flex-direction: row;
    list-style: none;
	margin-bottom: 0;
	font-weight:600;
	justify-content: space-around;

}
nav li {
    flex: 1 0 auto;
	margin-bottom: 0;
}
nav li a {
    text-decoration: none;
    text-align: center;
	color: #666;
}
nav a:hover {
	color:#43a4dc;
	transition: 0.5s /*ease-in-out*/;

}
nav a {
    padding: 2rem 1rem;
	display: block;
}


/* PC時はMENUボタンを非表示 ===============================================================================*/

@media screen and (min-width: 800px){
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

/* スマホ版 ========================================================================================================*/

@media screen and (max-width: 800px){
.head {
	flex-direction: column;
    text-align: left;
    margin-bottom: 20px;
}
.head #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}

/*nav li {
	padding-top: 0;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 0;
	text-align: center;
}*/


/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}





/*TOPメイン画像　複数画像切り替え======================================================================*/


/* PC版------------------------------------------------------------ */
@media only screen and (min-width: 700px){
.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 85%;  /*コンテナ幅を100%に*/
	height: 500px;  /*コンテナの高さを固定*/
	overflow: hidden; /* スライドがコンテナ外に出ないように非表示 */
	margin: 0 auto;
}

/*画像の配置*/
.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
	inset: 0; /*親要素内にフルサイズで配置*/
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 12s infinite; /* 1サイクル12秒を無限ループ */
}

/* スライド個別設定 */
.slideimg:nth-of-type(1) { background-image:url('../img/main06.jpg'); animation-delay: 0s; }
.slideimg:nth-of-type(2) { background-image:url('../img/main11.jpg'); animation-delay: 4s; }
.slideimg:nth-of-type(3) { background-image:url('../img/main10.jpg'); animation-delay: 8s; }


/*タイミング設定*/
@keyframes slideAnime {
	0%, 63%, 100% { opacity: 0; } /* 非表示のタイミング */
	20%, 33% { opacity: 1; } /* 表示されるタイミング */
}
}


/* スマホ版レスポンシブ------------------------------------------------------ */
 
@media only screen and (max-width: 700px){
.slider-container {
	position: relative; /* コンテナ内でスライド位置を相対的に設定 */
	width: 100%;  /*コンテナ幅を100%に*/
	height: 40vh;  コンテナの高さを固定
	overflow: hidden;  /*スライドがコンテナ外に出ないように非表示 */
	margin: 0 auto;
}

/*画像の配置*/
.slideimg {
	position: absolute; /* 位置を絶対指定で重ねて配置 */
	inset: 0; /*親要素内にフルサイズで配置*/
	opacity: 0; /* 初期状態で透明に */
	background-size: cover; /* 画像をスライド全体にカバー */
	animation: slideAnime 12s infinite; /* 1サイクル12秒を無限ループ */
}

/* スライド個別設定 */
.slideimg:nth-of-type(1) { background-image:url('../img/main03-_800x600-a.jpg'); animation-delay: 0s; }
.slideimg:nth-of-type(2) { background-image:url('../img/main03-_800x600b.jpg'); animation-delay: 4s; }
.slideimg:nth-of-type(3) { background-image:url('../img/main10-800x600.jpg'); animation-delay: 8s; }


/*タイミング設定*/
@keyframes slideAnime {
	0%, 63%, 100% { opacity: 0; } /* 非表示のタイミング */
	20%, 33% { opacity: 1; } /* 表示されるタイミング */
}
}


/*========================================================================*/


/*TOP　ジャンルボタン-------------------------------------*/

.ca_button_box {
	margin: 10em 0;
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top:auto;
	margin-bottom: auto;
}

.ca_button01:hover,.ca_button02:hover {
	background: #43a4dc;
	color: #fff;
}

.ca_button01 img, .ca_button02 img {
	width: 60px;
	height: auto;
	margin-right: 20px;
	vertical-align: -30px;
}



/* PC版------------------------------------------------------------ */
@media only screen and (min-width: 700px){

.ca_button01 {
	margin: 0.5em 0.5em 0.5em 0;
	width: 100%;
	height: 100px;
	line-height: 100px;
	text-decoration: none;
	color: #43a4dc;
	border: double 4px #43a4dc;
	border-radius: 5px;
	transition: .4s;
	font-size:x-large;
	display: block;
	box-sizing: border-box;
}

.ca_button02 {
	margin: 0.5em 0 0.5em 0.5em;
	width: 100%;
	height: 100px;
	line-height: 100px;
	text-decoration: none;
	color: #43a4dc;
	border: double 4px #43a4dc;
	border-radius: 5px;
	transition: .4s;
	font-size:x-large;
}
}

/* スマホ版レスポンシブ------------------------------------------------------ */
@media only screen and (max-width: 700px){

.ca_button01 {
	margin: 0.5em 0.5em 0.5em 0;
	width: 100%;
	height: 100px;
	line-height: 100px;
	text-decoration: none;
	color: #43a4dc;
	border: double 4px #43a4dc;
	border-radius: 5px;
	transition: .4s;
	font-size:4vw;
	display: block;
	box-sizing: border-box;
}

.ca_button02 {
	margin: 0.5em 0 0.5em 0.5em;
	width: 100%;
	height: 100px;
	line-height: 100px;
	text-decoration: none;
	color: #43a4dc;
	border: double 4px #43a4dc;
	border-radius: 5px;
	transition: .4s;
	font-size:4vw;
}
}





/*TOP　製品カテゴリ-------------------------------------*/
main {
    margin: 2rem 0 5rem 0;
}

.category h2{
    padding: 9px 19px 5px 19px;
    margin: 1em 0;
    color: #fff;
    background:linear-gradient(to left, #d1f4f2, #43a4dc);
	/*text-align: center;*/ /*中央揃え*/
	/*font-weight:bold;*/ /*太字*/
    /*background: #aee1ff;背景色*/
    /*border-top: solid 1.5px #43a4dc;*/
	/*border-left: solid 5px #d1f4f2;/*左線（実線 太さ 色）*/
    /*border-bottom: solid 1.5px #43a4dc;*/
}

.slider {
	position: relative;
	display: flex;
	width: 100vw;
	overflow: hidden;
}

/*TOP　横長ボタン[＞]-------------------------------------*/
.button001 a,
.button002 a {
	margin-left: auto;
    background: #fff;
    border-radius: 50px;
    border: 2px solid #43a4dc;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    padding: 10px 25px;
    color: var(--back-color);
    transition: 0.3s ease-in-out;
    font-weight: bold;
	font-size: 20px;
	letter-spacing: 0.3em
}

.button001 a:hover,
.button002 a:hover {
    background: var(--back-color);
    color: #FFF;
}

.button001 a:after,
.button002 a:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #43a4dc;
    border-right: 3px solid #43a4dc;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 50px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.button001 a:hover:after,
.button002 a:hover:after {
    border-color: white;
}



/*TOP　新着情報-------------------------------------*/
.news h2 {
    padding: 9px 19px 5px 19px;
    margin: 1em 0;
    color: #fff;
    background:linear-gradient(to left, #d1f4f2, #43a4dc);
    /*padding: 8px 19px 5px 19px;
    margin: 1em 0;
    color: #43a4dc;
	text-align: center;
	font-weight:bold;
    background:linear-gradient(to right, #43a4dc, white 30% 70%, #43a4dc);
    border-top: solid 1.5px #43a4dc;
    border-bottom: solid 1.5px #43a4dc;*/
}

.news li {
    list-style-type: none;
	border-bottom: 1px solid var(--border-color);
	padding: 0.5rem 0;
}


/*TOP　フッター-------------------------------------*/
footer {
    background :linear-gradient(#43a4dc, #d1f4f2); /*グラデ*/
    padding: 3rem 0;
	color: var(--white-color);
}

footer h5 {
    border-bottom: 2px solid var(--white-color);
    margin: 1rem 0;
}

footer a {
	color: var(--white-color);
}

footer a:hover {
	color: var(--link-color) ;
}



/*コピーライト-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--white-color);
}

.copyright a {
    color: var(--base-color);
    text-decoration: none;
	display: inline-block;
}


/*ページトップへ戻るボタン-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}

#pagetop a {
    display: block;
    background: var(--border-color);
    color: var(--white-color);
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}

#pagetop a:hover {
    background: var(--link-color);
}

/*パンくずリスト-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0;	
}

.breadcrumb li {
    list-style-type: none;
}

.breadcrumb li a {
    display: inline-block;
    color: var(--link-color);
}




/*別ページ・コンセプト/会社概要======================================================================*/

/* PC版-------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 800px){

/*アイコンメニュー-------------------------------------*/
.con_button_box {
	margin: 10em 0;
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top:auto;
	margin-bottom: auto;
}

.con_button_box a {
	margin: 1em;
	width: 100%;
	height: 65%;
	text-decoration: none;
	color: #43a4dc;
	border: double 4px #43a4dc;
	border-radius: 5px; /*角丸*/
	transition: 0.4s;
	font-size:medium;

	/*display: block;
	text-align: center;
	box-sizing: border-box;
	line-height: -30px;*/
}

.con_button_box li {
	margin: 1em ;
}

.con_button_box a:hover {
	background: #43a4dc;
	color: #fff;
}

.con_button_box a img {
	width: 40px;
	height: auto;
	margin-right: 10px;
	vertical-align: -25px;
}


/*中の設定-------------------------------------*/

.concept {
	margin: 50px auto;
	text-align: center;
	/*width: 100vw;*/
}

/*画面下の横長ボタン[＞]--------------------------------*/
.button001 a,
.button002 a {
	/*margin-left: auto;*/
	margin: 2em auto;
	padding: 10px 25px;
    background: #fff;
    border-radius: 50px;
    border: 2px solid #43a4dc;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    color: var(--back-color);
    transition: 0.3s ease-in-out;
    font-weight: bold;
	font-size: 20px;
	letter-spacing: 0.3em
}

.button001 a:hover,
.button002 a:hover {
    background: var(--back-color);
    color: #FFF;
}

.button001 a:after{
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #43a4dc;
    border-right: 3px solid #43a4dc;
    transform: rotate(-135deg) translateY(50%);
    position: absolute;
    top: 50%;
    left: 50px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.button002 a:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #43a4dc;
    border-right: 3px solid #43a4dc;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 50px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button001 a:hover:after,
.button002 a:hover:after {
    border-color: white;
}

.cop_h2{
	background: linear-gradient(transparent 70%, #43a4dc 70%);
}

.table_01{
	width: 100%;
}
}



/* スマホ版レスポンシブ--------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 800px){

/*アイコンメニュー-------------------------------------*/
.con_button_box {
	margin: 0.5em;
	/*display: flex;*/
	justify-content: center;
	text-align: center;
	margin-top:auto;
	margin-bottom: auto;
}

.con_button_box a {
	margin: 0.5em;
	width: 100%;
	/*height: 60px;*/
	text-decoration: none;
	color: #43a4dc;
	border: double 4px #43a4dc;
	border-radius: 5px; /*角丸*/
	transition: 0.4s;
	font-size:medium;
}

.con_button_box li {
	margin: 0.5em ;
}

.con_button_box a:hover {
	background: #43a4dc;
	color: #fff;
}

.con_button_box a img {
	width: 40px;
	height: auto;
	vertical-align: middle;
	margin-right: 10px;
}

nav a {
    padding:0.5rem;
	display: block;
}


.company_icon{
	
}


/*中の設定-------------------------------------*/
.concept {
	margin: 50px auto;
	text-align: center;
	/*width: 100vw;*/
}


/*画面下の横長ボタン[＞]--------------------------------*/
.button001 a,
.button002 a {
	/*margin-left: auto;*/
	margin: 2em auto;
	padding: 10px 25px;
    background: #fff;
    border-radius: 50px;
    border: 2px solid #43a4dc;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    color: var(--back-color);
    transition: 0.3s ease-in-out;
    font-weight: bold;
	font-size: 20px;
	letter-spacing: 0.3em
}

.button001 a:hover,
.button002 a:hover {
    background: var(--back-color);
    color: #FFF;
}

.button001 a:after{
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #43a4dc;
    border-right: 3px solid #43a4dc;
    transform: rotate(-135deg) translateY(50%);
    position: absolute;
    top: 50%;
    left: 10px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.button002 a:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #43a4dc;
    border-right: 3px solid #43a4dc;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button001 a:hover:after,
.button002 a:hover:after {
    border-color: white;
}

.cop_h2{
	padding-top:1em;
	background: linear-gradient(transparent 70%, #43a4dc 70%);
	font-size:x-large;
}

.table_01 tr th{
	width: 20%;
}

}


/*----------------------------別ページ・お問い合わせ------------------------------*/


.foam h2,.item h2 {
	padding: 9px 19px 5px 19px;
	margin: 1em 0;
	color: #fff;
	background:linear-gradient(to left, #d1f4f2, #43a4dc);
	text-align: center;
}

.col.span-12 h2 {
    padding: 8px 19px 5px 19px;
    margin: 1em 0;
    color: #43a4dc;
	text-align: center; /*中央揃え*/
	font-weight:bold; /*太字*/
    background:linear-gradient(to right, #43a4dc, white 30% 70%, #43a4dc);
    border-top: solid 1.5px #43a4dc;
    border-bottom: solid 1.5px #43a4dc;
}

.contact {
	margin: 5em ;
}







/*別ページ・商品ページ　削除予定======================================================

article {
	display:flex; サイドバーとメインコンテンツを横並びにする指定をした
	margin: 1em auto;}
.side {
	width:20%;
	height:400px;
	text-align:center;
	position:sticky;
	top:100px; /* スクロール時にビューポートの20px位置に達すると固定 */
	/* border: double 4px #ccc; */ /*二重の枠線*/
	background-color: #e5e5e5;
	color: #666;}
.side h5 {
	border-bottom: 2px solid white;}
.side ul {
	padding-left: 0;
	list-style: none;
	display: inline-block;}
.side ul li {
	text-align: left;}
.contents {
	width:80%;
	height:2000px;
	margin-left:10px;/*サイドバーとメインコンテンツの間に隙間をあけた*/}
.contents h2{
    color: #fff;
    background:linear-gradient(to left, #d1f4f2, #43a4dc);
	padding: 9px 19px 5px 19px;
	margin: 0;
	font-weight:bold; /*太字*/
	text-align: center;
	border-top: solid 1.5px #43a4dc;
	border-bottom: solid 1.5px #43a4dc;
	color: #43a4dc;
	background:linear-gradient(to right, #43a4dc, white 30% 70%, #43a4dc);}
.product {
	margin: 2em auto; 
	text-align: left;}
.pro01 {
	border: 2px solid #43a4dc;/*枠線*/
	border-radius: 20px;
	padding: 1em auto;
	margin-left:1rem;/*サイドバーとメインコンテンツの間に隙間をあけた*/}
.pro01 img {
	margin: 1em auto; }
.pro01 h5 {
	margin: 0 0.5em;
	font-weight: 600;}
.pro01 p {
	margin: 0 0.5em; }
----------------------------------------------------------------------------------*/