@charset "utf-8";

/*---------------------------------
	Responsive Grid Media Queries - 
	- desktop (default grid)
	- tablet landscape
	- tablet 
  - phone landscape & smaller
  
	Responsive Grid Media Queries - 980, 680, 480
	1024↑ 	- desktop (default grid)
	1023-600 	- tablet
	599-320 	- phone
-----------------------------------*/

/* mediaquery
@media all and (min-width: 981px) and (max-width: 1160px) {}
@media all and (min-width: 981px){}
@media all and (max-width: 980px){}
@media all and (min-width: 681px){}
@media all and (max-width: 680px){}
@media all and (min-width: 481px){}
@media all and (max-width: 480px){}
*/

:root{
  --bg:#ffffff;
	--bg-soft:#f6f7fb;
	--surface:#ffffff;
	--elev:#ffffff;
  --text:#0f172a;
	--muted:#6b7280;
	--brand:#2563eb;
	--brand-2:#1e40af;
	--accent:#10b981;
  --border:#e5e7eb;
  --border-2:#888888;
  --shadow:1px 2px 2px rgba(0,0,0,.04);
  --radius:8px;
	--radius-lg:16px;
	--radius-xl:24px;
  --container:1160px;
	--sp:14px;
	--md:18px;
	--lg:24px;
	--xl:34px;
;}

#header{padding: 0 20px;border: 0px solid blue;}
.container{padding: 0 20px;border: 0px solid red;}



/* ------------------------------------------------ */
/* RESET
------------------------------------------------ */
applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
q, blockquote{quotes:none;}
q:before, q:after, blockquote:before, blockquote:after{content:"";content:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{display:block;}
/* clearfix */
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}
.clearfix{zoom:1;/*overflow:hidden;*/}

/* awesome fonts
------------------------------------------------ */
i{font-family:FontAwesome;font-style:normal;}  
/* HTML5 ELEMENTS (shim)
------------------------------------------------ */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
/* link
------------------------------------------------ */
a:link, a:hover{color:#444;text-decoration:none;outline:0;}
a:link{transition: all 0.2s ease;}
a:hover{opacity:0.9;text-decoration: underline;}
a:visited{color:#444;text-decoration:none;}
a:active, a:hover{text-decoration:underline;cursor:pointer;}

a [class^="icon-"]{color:inherit;text-decoration:none;}
a.inblock{text-decoration:none;display:inline-block;zoom:1;}
a.inblock:hover{display:inline-block;zoom:1;}

/* display setting
------------------------------------------------ */
.show, .block, .display-block{display:block;}
.hide, .none,  .display-none{display:none;}
.inblock{display:inline-block;}
.inline{display:inline; vertical-align:middle;}

/* ------------------------------------------------ */
/* BASE
------------------------------------------------ */
html{font-size:62.5%; /*10px*/overflow-y: scroll;}
body{font-size:16px;font-size:1.6rem;line-height:1.8;}
body{
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content: space-between;
	width:100%;
	min-height:100vh;
	box-sizing: border-box;
	margin:0;
	padding:0;
	background-color:#fff;
	color:#333;
	font-family: Helvetica,"メイリオ", "meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS P Gothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	letter-spacing:0.04em;
	/*font-size:1.6px;font-size:1.6rem;*/
  /*line-height:1.7;*/
}
*{box-sizing:border-box;}
*,*::before,*::after{box-sizing:border-box;}
/* iframe */
iframe[class*="col_"]{width:100% !important;}
.inner-para iframe{margin-left:auto !important;margin-right:auto !important;margin-bottom:40px;}

/* ------------------------------------------------ */
/* MEDIA QUERY
------------------------------------------------ */
@media all and (min-width: 980px){
	.for-pc{display:block;}
	.for-tb{display:none;}
	.for-sp{display:none;}
	.for-pc-tb{display:block;} /* pc + tablet */
	.for-sp-tb{display:none;} /* tablet + iphone */s
	#main{width:1060px;}
}
@media all and (min-width: 680px) and (max-width: 980px) {
	.for-pc{display:none;}
	.for-tb{display:block;}
	.for-sp{display:none;}
	.for-pc-tb{display:block;} /* pc + tablet */
  .for-sp-tb{display:block;} /* tablet + iphone */
  body{font-size:16px;font-size:1.6rem;line-height:1.8;}
}
@media all and (max-width: 480px) {
	.for-pc{display:none;}
	.for-tb{display:none;}
	.for-sp{display:block;}
	.for-pc-tb{display:none;} /* pc + tablet */
	.for-sp-tb{display:block;} /* tablet + iphone */
  .col_4.for-pc{display:none;}
}/* menu */
@media all and (min-width: 981px) {
	.for-menu-pc{display:block;}
  .for-menu-sp{display:none;} /* tablet + iphone */
}
@media all and (max-width: 980px) {
	.for-menu-pc{display:none;}
  .for-menu-sp{display:block;} /* tablet + iphone */
}

/* ------------------------------------------------ */
/* LAYOUT
------------------------------------------------ */
#header, #footer, .container, .contents, section {margin-inline: auto;}

.container{flex:1;max-width:var(--container);width: 100%;}
.grid{display:grid;gap:20px;grid-template-columns: 1fr 1fr;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

.contents{margin-top: 40px;margin-bottom:40px;}
.contents .grid{gap:30px;}

@media all and (min-width: 981px) and (max-width: 1160px) {
  .container {width:var(--container);}
}
@media (min-width: 981px) {
  .contents .grid--1 #main {width: var(--container);}
  .contents .grid--2 #main {width: 740px;}
  .contents .grid--2 #aside {width: 300px;}
}
@media (max-width: 980px) {
  .contents .grid--2 {grid-template-columns: repeat(1, 1fr);}
  .contents .grid--2 #main {width: 100%;}
  .contents .grid--2 #aside {width: 100%;}
  .contents .ul-thumb.grid--1 {grid-template-columns: repeat(1, 1fr);gap:0;}
}
@media all and (max-width: 680px) {
  #index .grid--4 .card-media,
  #index .grid--3 .card-media {max-height: 300px;}
	#index .grid--3{grid-template-columns:repeat(2,1fr);}
  #index .grid--4{grid-template-columns:repeat(2,1fr);}
	.ad-card .grid--4{grid-template-columns:repeat(2,1fr);}
}
@media all and (max-width: 480px) {
  #index .grid--4{grid-template-columns:repeat(1,1fr);}
  #index .grid--3{grid-template-columns:repeat(1,1fr);}
	.ad-card .grid--4{grid-template-columns:repeat(1,1fr);}
}

.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

/* ===== セクション共通 ===== */
.section{padding:40px 0;}
.section-head{display:flex;justify-content:space-between;width: 100%;margin:0 auto 16px;}
.section-title{font-size:26px;font-size: 2.6rem;font-weight:800;}
.section-desc{color:var(--muted);font-size:18px;font-size: 1.8rem;}
.section-actions{display:flex;align-items: center;gap:10px;}
.section-footer{display:flex;justify-content: center;;width: 100%;margin:50px auto 0;}
.chip{font-size:16px;font-size: 1.6rem;border:1px solid var(--border);padding:10px 16px;border-radius:999px;background:#fff;}
.chip:hover{background-color: #eee;}

/* ===== imagen ===== */
.grid img {max-width: 100%;height: auto;}
.grid .imagen{width:100%;margin-bottom:30px;text-align:center;}
.grid .imagen span{width:100%;margin:0;padding:5px 5px 0;font-size:12px;font-size:1.2rem;display:inline-block;text-align:center;line-height:1.5;}
.grid .imagen-wide > img{aspect-ratio: 16 / 9;}
.grid .imagen-wide-vertical > img{aspect-ratio: 9 / 16;}
.grid .imagen-standard > img{aspect-ratio: 4 / 3;}
.grid .imagen-standard-vertical  > img{aspect-ratio: 3 / 4;}
.grid .imagen-threeHalves > img{aspect-ratio: 3 / 2;}
.grid .imagen-threeHalves-vertical > img{aspect-ratio: 2 / 3;}
.grid .imagen-half > img{aspect-ratio: 2 / 1;}
.grid .imagen-half-vertical  > img{aspect-ratio: 2 / 1;}
.grid .imagen-square > img{aspect-ratio: 1 / 1;}

/* ------------------------------------------- */
/* header
------------------------------------------------ */

#header-box{width:100%;height:80px;margin:0;padding:0;background-color:#fff;position:relative;}
#header-box .grid{margin:0 auto;}
#header-box .col_12{width:100%;margin:0;padding:0;}
#logo-sp{margin:0;padding:0;text-align:center;}
#logo-sp a{display:inline-block;}

/* PC
------------------------------------------------ */
#header{display: flex; align-items: center;justify-content: center;position:sticky;top:0;z-index:100;width: 100%;height:140px;background:rgba(255,255,255,0.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;flex-direction: column;height:100%;}
.header-line{display: flex;flex-direction:row;width: var(--container);}
.header-line.header-line-first  {display: flex;justify-content: space-between;height: 80px;border-bottom: 1px solid #ddd;}
.header-line.header-line-second {display: flex;justify-content: flex-start;height: 60px;padding: 0 5px;}
#header-login ul li {display: inline-block;}
#header-login ul li:first-child::after {content:"｜";display: inline-block;padding:0 5px;}
#header-brand{display:flex;align-items:center;padding-left:5px;}

.header-nav{display: flex;height: 100%;align-items: center;}
.header-nav-link{padding:10px 20px 10px 0;font-size:16px;font-weight: 700;vertical-align: middle;line-height: 1;}
.header-nav-link::before{content:"|";margin-right: 20px;}
.header-nav-link:first-child::before{content:"";margin-right: none;}
.header-link-primary{background:var(--brand);color:#fff;}
.header-menuBtn{display:none;}

@media all and (min-width: 981px) and (max-width: 1160px) {
  #header, #footer{width:var(--container);}
}
@media (max-width: 980px) {
  #header, #footer{width:100%;}
}

/* search */
.for-menu-pc #header-search{display:flex;align-items:center;padding-right: 10px;font-size:14px;font-size:1.4rem;}
.for-menu-pc #header-search form{margin:0;padding:0;position:relative;}
.for-menu-pc #header-search form input#word-pc{width:250px;height:40px;padding:8px 48px 8px 8px;border-radius: 3px 0 0 3px;border:1px solid #ddd;}
	.for-menu-pc #header-search form input#search-sbmit{width:40px;height:40px;background-color:#f5f5f5;background-image:url(../images/common/btn-search.png);position:absolute;right:0;}

/* SP
------------------------------------------------ */
header .for-menu-sp #header-box{width:100%;height:64px;box-shadow:0 0 3px 0 rgba(0,0,0,0.3);position:fixed;top:0;left:0;}
header .for-menu-sp #header-box #logo-sp{display: flex;justify-content: center;}
header .for-menu-sp #header-box .relative #sp-search{width:54px;height:54px;background-color:#ccc;position:absolute;top:0;right:0;}

#sp-menu{width:54px;height:54px;padding:10px;background-color:#fff;position:fixed;top:2px;left:0;transform:translateX(0);transition: .25s all;}
#sp-menu:hover{cursor:pointer;}
#sp-menu span{width:34px;height:3px;background-color:#999;border-radius:3px;position:absolute;}
#sp-menu span:nth-of-type(1){top:15px;}
#sp-menu span:nth-of-type(2){top:25px;}
#sp-menu span:nth-of-type(3){bottom:15px;}
#sp-menu.active span:nth-of-type(1){transform:translateY(10px) rotate(-45deg);}
#sp-menu.active span:nth-of-type(2){display:none;}
#sp-menu.active span:nth-of-type(3){transform:translateY(-10px) rotate(45deg);}
#sp-menu-back.active{width:100vw;height:100vh;background-color:#000;position:fixed;top:60px;left:0;opacity:0.45;}
#sp-menu-area{width:250px;height:100%;margin:0;background-color:#fff;position:fixed;top:61px;left:0;}
#sp-menu-area{transform:translateX(-250px);transition: .25s all;}
#sp-menu-area.active{transform:translateX(0);}
#sp-menu-area #sp-menu-form{background-color:#689ebd;}
#sp-menu-area #sp-menu-form form{padding:0;}
#sp-menu-area #sp-menu-form #word-sp{width:180px;height:32px;margin:8px 0 8px 8px;border-radius: 3px 0 0 3px;}
#sp-menu-area #sp-menu-form #search-sbmit{height:32px;border-width:1px 1px 1px 0;border-style:solid;border-color:#ccc;border-radius:0 3px 3px 0;background-color:#e1e1e1;}
#sp-menu-area #sp-menu-nav {border-top:1px solid #e1e1e1;}
#sp-menu-area #sp-menu-nav #ul-nav {height:100vh;background-color:#fff;}
#sp-menu-area #sp-menu-nav #ul-nav li{background-color:#fff;font-size:16px;font-size:1.6rem;font-weight: 700;text-align: center;}
#sp-menu-area #sp-menu-nav #ul-nav li a{width:100%;padding:10px 20px;display:block;}
#sp-menu-area #sp-menu-nav #ul-nav li a:hover{background-color:#e1e1e1;}

header .for-menu-sp #header-box{z-index:10;}
#sp-menu{z-index:1000;}
#sp-menu-back{z-index:100;}
#sp-menu-area{z-index:10000;}

@media all and (max-width: 980px) {
	#header{height: 64px;}
}

/* ------------------------------------------- */
/* footer
------------------------------------------------ */
#footer{display: flex;	flex-direction:column; align-items: center;justify-content: center;width:100%; margin:60px 0 0;padding:30px 0 0;background:#222;color:#fff;}
#footer ul.ul-footer{margin-left:10px;}
#footer ul.ul-footer li{margin-bottom:5px;font-size:14px;font-size:1.4rem;}
#footer ul.ul-footer li a:link,
#footer ul.ul-footer li a:hover,
#footer ul.ul-footer li a:visited{color:#fff;}
#footer .footer-copy-right{width: 100%;margin:0;padding:25px 0;font-size:12px;font-size:1.2rem;border-top:1px solid #666;text-align:center;line-height: 1;}

/* ------------------------------------------- */
/* side
------------------------------------------------ */
.side .h3-side h3{margin:0;padding:5px;font-size:20px;font-size:2.0rem;}

/* ------------------------------------------- */
/* TOP PAGE
------------------------------------------------ */
/* ===== ヒーローセクション ===== */

.hero-section{/*aspect-ratio: 16 / 4;*/ width:100%;height:45vh;margin-bottom:20px;padding:0;background:/*linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35)),*/url('../images/common/hero-photo01.webp') center/cover no-repeat;color:#fff;box-shadow:var(--shadow);}
.hero-section .hero-inner{position:relative;height:100%;}
.hero-section .hero-inner h1 {position:absolute; left: 20px; right: 20px; bottom: 24px;margin:0;padding:0;font-family: "Russo One", sans-serif; font-weight: 400; font-style: italic; font-size: 24px; opacity: 0.8;}

.hero-section .hero-inne h1 {text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);}
.hero-section .hero-inne h1 span {white-space: nowrap;}
.hero-section .hero-inner h1 .h1-title{display: inline-block; font-size: 36px;font-weight: 900;letter-spacing: 0.2rem;}
.hero-section .hero-inner .photoby{position: absolute; right:10px; bottom: 8px; padding: 6px 8px;border-radius: 8px;background-color: rgba(255, 255, 255, 0.5);font-size: 10px;color: var(--text);line-height: 1;}
.hero-section .hero-inner .photoby a {color: var(--text);text-decoration: underline;}

@media all and (min-width: 981px) and (max-width: 1160px) {
  .hero-section {width:var(--container);}
}
@media all and (max-width: 980px) {
	.hero-section{height:35vh;}
}

/* 完全版 保存用
/* hero section
------------------------------------------------
.hero{position:relative;padding:0 0 50px;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.35)),url('https://images.unsplash.com/photo-1483721310020-03333e577078?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;color:#fff;}
.hero-inner{aspect-ratio: 16 / 9;max-height:50vh;padding:80px 20px 36px;}
.hero-lead{max-width:760px;margin:0 auto;text-align:center;}
.hero-title{font-size:clamp(26px,4.2vw,44px);line-height:1.25;margin:0 0 10px;font-weight:800;}
.hero-subtitle{color:#e5e7eb;margin:0 0 28px;}
.hero-search{display:flex;gap:10px;align-items:center;justify-content:center;}
.search{display:flex;background:#fff;border-radius:999px;padding:8px;border:2px solid transparent;max-width:760px;flex:1;box-shadow:0 10px 30px rgba(0,0,0,.15);}
.search:focus-within{border-color:var(--accent);}
.search-input{flex:1;border:0;outline:0;padding:12px 16px;border-radius:999px;font-size:16px;}
.search-button{border:0;border-radius:999px;padding:12px 18px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;}

.hero-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;}
.kpi{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:14px;text-align:center;}
.kpi-title{font-weight:700;}
.kpi-caption{font-size:13px;color:#d1d5db;}

.hero-ticker{margin-top:26px;}
.ticker{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;}
.badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:8px 12px;border-radius:999px;font-size:13px;}

.countdown{margin-top:22px;display:inline-flex;gap:8px;background:rgba(255,255,255,.12);padding:10px 12px;border-radius:999px;}
.countdown-num{font-weight:800;}
*/

/* ===== ボタン ===== */
a.button:link { color: #444; text-decoration: none;}
a.button:visited { color: #444;}

a.button.footer-button:link,
a.button.footer-button:hover,
a.button.footer-button:visited{padding:16px 64px;border:1px solid var(--border);background-color: #fff;font-size:18px;font-size:1.8rem;font-weight:700;box-shadow:var(--shadow);}
a.button.footer-button::after{content:"▲";display: inline-block;transform: rotate(90deg);margin-left:5px;}

/* ===== カード ===== */
.card{display: flex;align-items: center;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);}
.card a {display: block;height: 100%;}
.card-media{background:#eee;object-fit:cover;aspect-ratio:3/2;}
.card-body{padding:10px 15px;}
.card-meta{font-size:14px;font-weight:700;}
.card-time{font-size:14px;}
.card-title{font-weight:700;margin:6px 0;}
.card-para{font-size:16px;font-weight:400;margin:6px 0;line-height: 1.6;}
.card-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.tag{font-size:12px;background:var(--bg-soft);padding:4px 8px;border-radius:999px;border:1px solid var(--border);}
.grid--3 .card-media{width:100%;min-height: 150px;max-height:220px;}
.grid--4 .card-media{width:100%;min-height: 140px;max-height:200px;}
.ad-card .grid--4 .card-ad-frame {display:flex;align-items: center;justify-content: center; width: 160px;height: 160px;margin-top:10px;margin-inline: auto;}

/* ===== ランキング ===== */
.rank{display:grid;grid-template-columns:2fr 1fr;gap:20px;}
.rank-main{background:var(--elev);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;}
.rankList{display:grid;grid-template-columns:1fr;gap:10px;}
.rankItem{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:#fff;}
.rankItem-no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--bg-soft);}
.rankItem-name{font-weight:700;}
.rankItem-score{font-size:12px;color:var(--muted);}
.rank-aside{display:grid;gap:10px;}
.meter{padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;}
.meter-bar{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--accent));}

/* ===== イベント ===== */
.eventCard{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff;}
.eventCard-date{display:grid;place-items:center;padding:5px;background:var(--bg-soft);border-radius:12px;border:1px solid var(--border);text-align: center;}
.eventCard-date strong{font-size:22px;}
.eventCard-meta{font-size:12px;color:var(--muted);}

/* ===== ギア（レビュー） ===== */
.stars{font-size:14px;}

/* ===== コミュニティ ===== */
.community{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;}
.feedItem{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff;}
.avatar{width:64px;height:64px;border-radius:16px;background:#ddd;}
.miniGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mini{aspect-ratio:1/1;background:#ddd;border-radius:10px;}



/* ------------------------------------------- */
/* FORM
------------------------------------------------ */
.inner-search{margin:0 0 20px;padding:25px 20px;background:#f1f1f1;border:none;border-radius:3px;}
.inner-search form{margin:0;padding:0;}
.inner-search form label{margin:0 0 5px 0;padding:0;font-size:14px;font-size:1.4rem;white-space:nowrap;}

/* ===== レスポンシブ ===== */
@media (max-width: 980px){
  header {height: 60px;}
  .rank{grid-template-columns:1fr;}
  .community{grid-template-columns:1fr;}
  .hero{margin-top:0px;}
  .section-head {flex-direction: column; }
  .section-actions{justify-content: flex-end;margin-top: -20px;}
  ;}
@media (max-width: 680px){
  .header-nav{display:none;}
  .header-menuBtn{display:inline-flex;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;}
  /*.hero-inner{padding:64px 16px 22px;}*/
  .hero-kpis{grid-template-columns:1fr;}
  .eventCard{grid-template-columns:1fr;}
}
@media (max-width: 480px){

}