/*
Theme Name: アネロス商品情報
Theme URI: https://products.aneros.co.jp/
Author: RKK
Author URI: https://products.aneros.co.jp/
Description: アネロス商品紹介テーマ.
Template:     twentytwentyone
Version:      1.1.12
Text Domain:  twentytwentyonechild
*/

.site-main {padding:0 !important;}
.entry-header {display:none;}

#masthead {background-color:#1f1f1f; padding:15px 0; max-width:100%;}
#masthead a.logo, #masthead a.logo img {margin:auto; max-width:350px; width:100%; padding: 0 20px;}
#masthead a.logo:focus {background:transparent;}

.container {
    position: relative;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0;
    align-items: flex-start;
}

.content {margin:0 auto; max-width: 1000px; padding:25px;}

.top-container {background-color:#111; min-height:40px;}

.products-nav {width:900px; margin: auto;}
.products-nav ul {list-style:none; padding: 10px 100px; text-align:center;}
.products-nav ul li {margin: 0; width: 80px; min-height:80px; display:inline-block; opacity: 0.5; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;}
.products-nav ul li:hover, .products-nav ul li:focus, .products-nav ul li:active {opacity: 1;}
.products-nav ul li a {color:white; text-decoration:none;}
.has-background-white .site .products-nav ul li a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {background:transparent;}
.products-nav ul li a img {max-width:60px;}
.products-nav ul li a h3 {font-size:6px; border-top: 1px white solid; padding-top: 5px;}

.container a.icon {display:none;}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.grey-swooth {
    background: #272727 url(https://products.aneros.co.jp/wp-content/uploads/2023/12/whiteSwoosh.png) center top no-repeat;
    padding: 40px 0;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

footer.site-footer {background-color:#272727; padding:20px 0 0; max-width:100%; text-align:center;}
.no-widgets .site-footer {margin:0;}
footer.site-footer a {color:white; font-size:10px; text-decoration:none; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;} 
footer.site-footer a:hover {color:red; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;}
.footer-list {display:inline-block; padding: 0 20px;}
footer h3{color: #ffffff; font-size: 16px; margin-bottom: 12px; border-bottom: 1px solid #3b3b3b; letter-spacing: 1px; text-transform: uppercase; line-height: 32px; font-weight: normal;}

footer.site-footer .footer-bottom {padding: 20px 0px;font-size: 12px;background-color: #1f1f1f;border-top: 1px solid #3a3a3a;color: #777; margin-bottom:0;}


.container h2 {text-align:center;line-height: 48px;}
.container h2 span {color:red;font-size:28px;padding-left:10px;}
.main-pic {padding:15px 30px;}
.main-pic img {max-width:400px; width:100%; display:block; margin: 0 auto;}
.container h2 img {max-width:400px; width:100%;}

.pictogram-area {padding:10px 0; margin:auto; text-align:center;}

.pictogram {position: relative;display: inline-block;}
.pictogram img {width:40px;max-width:100%;margin:15px 10px;}
.pictogram .pictogramtext {visibility: hidden;width: 90px;background-color: black; color: #fff;text-align: center;border-radius: 6px;border: 1px solid #000;padding: 5px 0;position: absolute;z-index: 1;top: 85%;left: 50%;margin-left: -45px;font-size: 10px;}
.pictogram .pictogramtext::after {content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent black transparent;}
.pictogram:hover .pictogramtext {visibility: visible;}
.pictogram .pictogramtext {opacity: 0;transition: opacity 1s;}
.pictogram:hover .pictogramtext {opacity: 1;}

ul.features-list {padding-left:20px;}
ul.features-list li {font-weight:normal; font-size:16px;}
ul.features-list li::marker {color: red;}

.exp-box {padding: 20px 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #f5f5f5;}
.container .product-exp h4 {text-align:left; font-size:32px; color:#e00000; font-weight:normal; margin-bottom:10px;}
.container .product-exp {font-size:14px;}
.container .product-exp p {padding-bottom:15px;}
.container .product-exp p:last-child {padding-bottom:0;}

.insert-image {margin: 0 auto;text-align:center;padding:20px;}
.insert-image img {max-width:100%; border:1px black solid;}

.size-image {margin: 0 auto;text-align:center;padding:20px;}
.size-image img {max-width:100%; border:1px black solid;}
.size-image ul {list-style:upper-alpha; max-width:600px; margin:15px auto 0; text-align:left;}
.size-image ul li {font-weight:normal; font-size:16px;}
.size-title {color:#919191;}

.site-links a {text-decoration:none;}
.site-links button {display:inline-block; width:49%; margin-right:1%; border:1px solid #aaa; padding:15px 50px; background:linear-gradient(#ffffff, #cccccc); color:black !important; text-align:left;}
.site-links button:hover {background:#dddddd;}
.site-links button .fas, .site-links button .far {padding-top:10px;font-size: 42px; margin-right:10px; color:#e00000;}
.site-links button .flex {display: flex;}
.site-links button .text {flex-direction: column;margin-left: 10px;}


/* 商品説明背景画像 */
#hsv-back {background-image: url(https://products.aneros.co.jp/wp-content/uploads/2024/01/hsv_bg1.jpg)}
#mst-back {background-image: url(https://products.aneros.co.jp/wp-content/uploads/2024/01/MGX-Syn-Trident-bluebg.jpg)}
#mst-back .product-exp p, #vice-2-back .product-exp p, #hst-back .product-exp p, #progasm-back .product-exp p, #marksman-back .product-exp p, #est-back .product-exp p {color:white;}
#vice-2-back {background: #181818;background: -webkit-linear-gradient(top, #000, #333);background: -o-linear-gradient(top, #000, #333);background: -moz-linear-gradient(top, #000, #333);background: linear-gradient(top, #000, #333);background: -ms-linear-gradient(top, #000, #333);}
#hst-back {background-image: url(https://products.aneros.co.jp/wp-content/uploads/2024/01/red-background.jpg)}
#prelude-back {background-image: url(https://products.aneros.co.jp/wp-content/uploads/2024/01/prelude-bg1-scaled.jpg)}
#progasm-back {background-image: url(https://products.aneros.co.jp/wp-content/uploads/2024/01/progasm-ice-bg.jpg)}
#marksman-back {background-color: #000000}
#est-back {background-image: url(https://products.aneros.co.jp/wp-content/uploads/2024/01/Eupho-Syn-redbg.png)}
#psy-back {background-image: url(https://products.aneros.co.jp/wp-content/uploads/2024/01/Psy-bg.jpg)}

.container#psy-back .product-exp {padding:20px;background:rgba(0, 0, 0, 0.6);border-radius:20px;}

.container#psy-back .product-exp h4, .container#psy-back .product-exp p {color:white;}

@media only screen and (max-width: 999px){
	.products-nav {
		display: none;
		width:inherit;
	}
	.container a.icon {
		display: block;
		position: absolute;
		right: 20px;
		top: -45px;
		color:white;
	}
	.top-container {min-height:inherit;}
	.products-nav.responsive {position: relative;}
	.products-nav.responsive ul li.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.products-nav.responsive {
		float: none;
		display: block;
		text-align: left;
	}
	.products-nav ul li {display:block; min-height:inherit; width:inherit; opacity: 0.7;}
	.products-nav ul li a img {display:none;}
	.products-nav ul li a h3 {font-size:10px; padding: 5px 0;}
	.products-nav ul li:first-child a h3 {border-top:none;}
	
	ul.features-list li {font-weight:normal; font-size:14px;}
	
	.container .product-exp h4 {text-align:left; font-size:24px; color:#e00000;}
	.container .product-exp {font-size:12px;}
	.site-links button {display:block; width:100%; margin-right:0; margin-bottom:10px; padding:15px 25px; font-size:16px;}
	.site-links button .text {position:absolute; left:120px;}
	.site-links button .fas, .site-links button .far {padding-top:5px;}
}
@media only screen and (max-width: 480px){
	#masthead a.logo, #masthead a.logo img {width:95%;}
}