/*! Luxeritas Child CSS */
/* Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link http://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 *   Theme Name: Luxeritas Child Theme
 *   Template: luxeritas
 *   Text Domain: luxech
 *   Theme URI: http://thk.kanzae.net/wp/
 *   Description: SEO optimized, Responsive layout, Super Fast, Multi Feature, Bootstrap
 *   Author: LunaNuko
 *   Author URI: http://thk.kanzae.net/
 *   License: GNU General Public License v2 or later
 *   License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *   Tags: one-column, two-columns, three-columns, right-sidebar, left-sidebar, custom-header, custom-background, custom-colors, custom-menu, theme-options, featured-image-header, editor-style, sticky-post, threaded-comments, translation-ready
 *   Since: 20151206
 *   Modify: 20210517
 *   Version: 3.0.4
 *   Template Version: 3
 *
 * ここから上を消すと正しく動作しなくなることがあります。
 * ( Erasing the elements above here might cause system issues. )
 */

/* 以下、好みに応じて子テーマ用のスタイルをお書きください。
 * ( Below here, please write down your own styles for the child theme. )
 */
 
 /************************************				
** kazu 独自CSS		
*************************************/
/** PC 限定 CLS 対策  **<div id="primary" class="clearfix" style="height: auto !important;">***/
@media (min-width: 1024px) {
  .thumbnail.wp-post-image {
    aspect-ratio: 150 / 122;
    display: block;
    }
 }

/*******  Q&A  ****/
/* Q&A 全体 */
.qa details {
  margin-bottom: 10px;
}

/* summary = ボタン */
.qa summary {
  /*コレ*/display: block;
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f3f6fa;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
/** 絵文字挿入*/
.qa summary::before {
  content: "🤔";
}
.qa details[open] summary::before {
  content: "💡";
}

/* デフォルト矢印を消す */
.qa summary::-webkit-details-marker {
  display: none;
}

/* 押せる感 */
.qa summary:hover {
  background: #e9eef5;
}
/* 押した瞬間光る */
.qa summary:active {
  transform: scale(0.98);
}


/* 回答 */
.qa details p {
  margin: 8px 0 0;
  padding: 12px 16px;
  background: #fff;
  border-left: 4px solid #dbe3ef;
  border-radius: 0 0 10px 10px;
  line-height: 1.6;
}

/* PC：矢印 */
@media (hover: hover) {
  .qa summary::after {
    content: "▶";
    margin-left: auto;
    transition: transform 0.2s ease;
    color: #888;
  }

  .qa details[open] summary::after {
    transform: rotate(90deg);
  }
}

/* スマホ：＋ − */
@media (hover: none) {
  .qa summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.2em;
    color: #888;
  }

  .qa details[open] summary::after {
    content: "−";
  }
}


/*** 総合評価 ***/
.rating-star {
  color: #f5c518; /* きれいな黄色（Google系） */
}

/* header 内に入る Google 自動広告を無効化 */
#header .google-auto-placed,
#header ins.adsbygoogle {
  display: none !important;
}
/* スマホ表示設定 */

.SP { display: none !important; }
@media (max-width: 768px) {
/** google 広告 スクロール位置維持」機能をOFF**/
 body {
    overflow-anchor: none;
  }
 /*<div class="cls-buffer"></div> headerphp*/
 .cls-buffer {
    min-height: 300px;
  }
 /*広告枠*/
 
a.asp_link_image {				
	margin: 10px 0px;			
	}
	.thumbnail wp-post-image{
		width: 150px;
		height: 150px;
	}
/** google広告 **/
#header {					
aspect-ratio: 3 / 2;					
background-image:					
linear-gradient(					
130deg,					
rgba(255,255,255,0.9) 0%,					
rgba(255,255,255,0.9) 20%,					
rgba(255,255,255,0) 50%					
),					
var(--header-bg, url('/wp-content/uploads/2024/09/doragon-SP-jpg.webp')),					
var(--header-bg, url('/wp-content/uploads/2024/09/doragon-SP-jpg.webp'));					
}
.SP { display: block !important; }
			
}				
.post h2{				
background: -webkit-repeating-linear-gradient(-45deg,  #FFC7AF, #FFC7AF 3px, #fff 3px,  #fff 7px);				
background: repeating-linear-gradient(-45deg,  #FFC7AF,  #FFC7AF 3px, #fff 3px,  #fff 7px);				
color: #000044;				
border-left: solid 8px #FF8856;				
}				
.post h3 {				
position: relative;				
border-left: none;				
padding-bottom: 0.3em;				
}				
				
.post h3:after {				
content: "";				
position: absolute;				
left: 0;				
bottom: 0;				
width: 100%;				
height: 7px;				
border-radius: 10%;				
background: -webkit-repeating-linear-gradient(-45deg, #FFC7AF, #FFC7AF 2px, #fff 2px, #fff 4px);				
background: repeating-linear-gradient(-45deg, #FFC7AF, #FFC7AF 2px, #fff 2px, #fff 4px);				
}

/**　遅延表示 */
/**フワ〜っと表示させる */		
.fade {		
opacity : 0;		
transform: translateY(20px);		
transition: all 1s;		
}	
	

/* ヘッダー全体 */					
					
#header {					
aspect-ratio: 1180 / 199;					
background-image:					
linear-gradient(					
130deg,					
rgba(255,255,255,0.9) 0%,					
rgba(255,255,255,0.9) 20%,					
rgba(255,255,255,0) 50%					
),					
var(--header-bg, url('/wp-content/uploads/2024/09/doragon-PC-jpg.webp')),					
var(--header-bg, url('/wp-content/uploads/2024/09/doragon-PC-jpg.webp'));					
					
background-size:					
cover,    /* 演出レイヤー */					
contain,  /* メイン画像（切らない）*/					
cover;    /* 背景補完 */					
					
background-position:					
center,					
center,					
center;					
					
background-repeat: no-repeat;					
}					
					
/********* heder ここまで*******/	

/*----- ASP-リンク 表示 -----*/				
/* 親 */				
a.asp_link_image {				
position:relative;				
display: flex;				
justify-content: center; /* 上下中央 */				
height: 200px;           /* 固定高さ */				
margin: 20px  0px;				
padding-bottom: 20px;				
width: 100%;				
text-decoration: none;				
border: none;				
}				
/* 子 */				
.text-window {				
display: block;				
width: 85%;				
 height: calc(1.9em* 3); /* 行高 × 3行 */				
line-height: 2em;				
color: #000066;				
font-size: 19px;				
font-weight: 600;				
z-index: 2;				
overflow: hidden;				
position: flex;				
}				
				
/* ASP全文 */				
.text-inner {				
display: block;				
animation: textScroll-y 6s linear infinite;				
}				
/* ASP記述文のY軸スライド */				
@keyframes textScroll-y {				
0% {				
transform: translateY(0);				
}				
40% {				
transform: translateY(0);				
}				
80% {				
transform: translateY(-100%);				
				
}				
100% {				
transform: translateY(0);				
}				
}				
				
/* CTA アクション文 */				
a.asp_link_image .cta {				
position: absolute;				
display:flex;				
inset: 0;				
justify-content: center;				
align-items: center;				
font-size: 30px;				
font-weight: bold;				
color: #FF3333;				
-webkit-text-stroke: 2px  #FF3333;				
transition: opacity .1s ease;				
pointer-events: none;				
z-index: 3;				
opacity: 0;				
}				
/* 背景画像取得 ＆ X軸スライド */				
.bg-scroll {				
position: relative;				
overflow: hidden;				
}				
				
.bg-scroll::before {				
content: "";				
position: absolute;				
inset: 0;				
background-image:				
var(--bg1), var(--bg2), var(--bg3),				
var(--bg1), var(--bg2), var(--bg3);				
				
background-size:				
300px 100%, 300px 100%, 300px 100%,				
300px 100%, 300px 100%, 300px 100%;				
				
background-position:				
0 0, 300px 0, 600px 0, 900px 0, 1200px 0, 1500px 0;				
				
background-repeat: no-repeat;				
animation: bgMove 30s linear infinite;				
opacity: 0.2;				
}				
/* スライド */				
@keyframes bgMove {				
from {				
background-position:				
0 0, 300px 0, 600px 0, 900px 0, 1200px 0, 1500px 0;				
}				
to {				
background-position:				
-900px 0, -600px 0, -300px 0, 0 0, 300px 0, 600px 0;				
}				
}				
/* PC表示 */				
@media (min-width: 769px) {				
.text-inner {				
line-height: 1.8;				
height: calc(1.7em * 3)				
}				
a.asp_link_image .cta {			
animation: textCta 6s linear infinite;			
}			
@keyframes textCta {			
0%, 81% ,90%{ opacity: 0; }			
	82% {opacity: 1;}		
 }			
}				
/* PC hover表示 */				
@media (hover: hover){				
a.asp_link_image:hover .cta {				
animation: textCta paused;				
opacity: 1;				
}				
a.asp_link_image.bg-scroll:hover::before {				
opacity: 1;				
}				
a.asp_link_image:hover .text-inner {				
opacity: 0;				
}				
}				
				
@media (hover: none) and (pointer: coarse) {				
	a.asp_link_image .cta {			
animation: blinkCta 8s infinite;				
}				
	a.asp_link_image.bg-scroll::before {			
animation:				
bgMove 30s linear infinite,				
blinkScroll 8s infinite;				
}				
	a.asp_link_image .text-window {			
	animation: blinkText 8s infinite;			
	}			
.text-inner {				
animation: textScroll-y 8s linear infinite;				
}				
				
@keyframes blinkCta {				
0%, 100% { opacity: 1; }				
70% { opacity: 0; }				
}				
@keyframes blinkScroll {				
0%, 100% { opacity: 1; }				
70% { opacity: 0.1; }				
}				
@keyframes blinkText {				
0%, 100% { opacity: 0; }				
70%{ opacity: 1; }				
}				
}				
/*----- ASP-リンク 表示 ここまで-----*/	

.my_box {			
display: -webkit-flex; /* Safari */			
 display:flex ;			
justify-content:center;			
-webkit-flex-wrap: wrap-reverse; /* Safari */			
flex-wrap:wrap-reverse;			
/* border:1px solid black;			
background-color:lightgray;*/			
}			
			
.my_box_chd {			
position:relative;			
width:300px;			
height:auto;			
/* background-color:#ffffff; */			
justify-content:center;			
-webkit-flex-wrap: wrap-reverse; /* Safari */			
margin-left:5px;			
}			
			
.my_box_chd p{			
	position:absolute;		
	font-size:15px;		
	right:0;		
	margin:0;		
	left:0;		
	bottom:8px;		
	color: #fff; /* 文字色*/		
	width:99.8%;		
	background: #000; /* 帯 */		
filter: Alpha(opacity=80);			
opacity: 0.8;			
	line-height:31px;		
text-align:center;			
	object-fit: cover; /* 縦横比を保ってサイズを揃える */		
}			
			
			
/* 番号付与mybox チエック付与Mybox */			
.mybox_ol ol,.mybox_ul ul{			
background: #fffde8;			
box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/			
border: dashed 2px #ffb03f;/*破線*/			
border-radius: 9px;			
margin:30px 10px ;			
}			
.my_box_chd img{			
width:300px;			
height:220px;			
object-fit: cover; /* 縦横比を保ってサイズを揃える */			
}			
			
.mybox_ol ol{			
padding: 0.5em 0.5em 0.5em 2.5em;			
}			
.mybox_ul ul{			
padding: 0.5em 0.5em 0.5em 0.7em;			
list-style-type: none!important;			
}			
.mybox_ul ul li, .mybox_ol ol li{			
line-height: 1.7;			
font-size: 16px;			
position: relative;			
}			
.mybox_ul ul li{			
font-weight: bold;			
}			
			
.mybox_ul ul li:after {/*疑似要素*/			
/*  content: "□";/*アイコンの種類*/  */			
position: relative;			
left : 0em;  /*左端からのアイコンまでの距離*/			
color:  #000000;/*アイコン色*/			
font-size: 20px;			
line-height: 1.4;			
left : 0em;			
}			
			
.mybox_ul ul li:before {/*疑似要素*/			
font-family: "Font Awesome 5 free";			
content: "\f00c";/*アイコンの種類*/			
position: absolute;			
left : 0em; /* 左端からのアイコンまでの距離*/			
color:  #FF1493;/*アイコン色*/			
font-size: 18px;			
line-height: 1.4;			
}			
			
.mybox_komento {			
padding: 0.5em 0.5em 0.5em 0.7em;			
margin:20px 10px 51px 10px;			
	color: #565656;		
	background: #fffde8;		
	box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/		
border: dashed 2px #ffb03f;/*破線*/			
border-radius: 8px;			
position: relative;			
}			
.mybox_komento .box-title {			
position: absolute;			
display: inline-block;			
top: -10px;			
left: 10px;			
padding: 0 9px;			
line-height: 1.1;			
font-size: 19px;			
background: #ffeaea;			
color: #0000FF ;			
font-weight: bold;			
}			
.mybox_komento p {			
margin: 0;			
padding: 0;			
}			
/*------ 考え事風box---------*/			
.mybox_kangae{			
position: relative;			
margin: 2em 20px 3em 39px;			
padding: 8px 15px;			
background: #fff0c6;			
border-radius: 30px;			
	border-image		
}			
.mybox_kangae:before{			
	font-family: "Font Awesome 5 Free";		
	font-weight:500;		
content: '\f111';			
position: absolute;			
font-size: 15px;			
left: -40px;			
bottom: 0;			
color: #ffdbc9;			
}			
.mybox_kangae:after{			
font-family: "Font Awesome 5 Free";			
content: "\f111";			
	font-weight:500;		
position: absolute;			
font-size: 23px;			
left: -23px;			
bottom: 0;			
color: #ffdbc9;			
}			
.mybox_kangae p {			
margin: 0;			
padding: 0;			
}			
			
/****** 　広告枠開閉ボタン　*******/			
/*全体*/			
.hidden_box {			
margin: 2em 0;			
padding: 0;			
	text-align:center;		
}			
.hidden_box p{			
text-align:left;			
}			
/*ボタン装飾*/			
.hidden_box label {			
cursor :pointer;			
position: relative;			
display: inline-block;			
padding: 0.25em 0.5em;			
text-decoration: none;			
color: #FFF;			
background: #fd9535;/*色*/			
border-radius: 4px;/*角の丸み*/			
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);			
font-weight: bold;			
border: solid 2px #d27d00;/*線色*/			
text-align:left;			
}			
			
.hidden_box label:hover {			
background: #fd9535;/*色*/			
color: #FFF;			
}			
			
/*アイコンを表示*/			
.hidden_box label:before {			
display: inline-block;			
content: '\f078';			
font-family: 'Font Awesome 5 free';			
padding-right: 5px;			
transition: 0.2s;			
}			
			
/*アイコンを切り替え*/			
.hidden_box input:checked ~ label:before {			
content: '\f078';			
color: #FFFFCC;/*色*/			
-webkit-transform: rotate(180deg);			
transform: rotate(180deg);			
			
}			
			
.hidden_box label:active {			
/*押したとき*/			
/* box-shadow: 0 0 3px rgba(0, 0, 0, 0.50);*/			
content: '\f00d';			
color:  #FFF;			
z-index:10;			
}			
/*チェックは見えなくする*/			
.hidden_box input {			
display: none;			
}			
			
/*中身を非表示にしておく*/			
.hidden_box .hidden_show {			
height: 0;			
padding: 0;			
overflow: hidden;			
opacity: 0;			
transition: 0.8s;			
}			
			
/*クリックで中身表示*/			
.hidden_box input:checked ~ .hidden_show {			
padding: 10px 0;			
height: auto;			
opacity: 1;			
text-align:left;			
}			
			
/* テーブル　*/			
			
table.mytable1 {			
	width: 100%;		
	margin:1em 0 4em;		
	border-top: 1px solid #ccc;		
	border-left: 1px solid #ccc;		
	border-bottom: 1px solid #ccc;		
	border-right: 1px solid #ccc;		
	border-spacing:0px;		
	}		
table.mytable1 tr th,table.mytable1 tr td {			
	border-top: 1px solid #ccc;		
	border-left: 1px solid #ccc;		
	text-align: center;		
	font-size: 12px;		
	border-bottom: 1px solid #ccc;		
	border-right: 1px solid #ccc;		
	padding: 3px;		
	}		
table.mytable1 thead {			
	background: #ffe4c4;		
	}		
table.mytable1 tbody.area1 {			
	background: #fff0f5;		
	}		
table.mytable1 tbody.area2 {			
	background: #fffff0;		
	}		
			

/************************************					
** レスポンシブデザイン用のメディアクエリ					
************************************/					
@media screen and (max-width: 600px) {  				
					
table.mytable1 {					
	border:none				
	}				
table.mytable1 thead {					
	display: none;   			
	}				
table.mytable1 tr {					
	display: block;  /*trをブロックレベルに	*/			
	margin-bottom:.5em;				
	border-bottom:1px solid #ccc;				
	box-shadow:0 2px 2px #ddd;				
	}				
table.mytable1 tr td {					
	display:block;  /*tdをブロックレベルに（セルをやめる）*/				
	border-top: 1px solid #ccc;				
	border-left: 1px solid #ccc;				
	border-right: 1px solid #ccc;				
	border-bottom:none;				
	}				
table.mytable1 tr td::before {   /*tdに擬似要素 ::before */					
	content: attr(aria-label);  /*aria-label属性の値をコンテンツに */				
	float: left;                /*テキストを左寄せにする */				
	font-weight:bold;				
	padding-left:.7em				
	}				
table.mytable1 tr td::after {   /*クリアフィックス（コレは不要かもしれません）*/					
	content:"";				
	display:table;				
	clear:both;				
	}				
table.mytable1 tbody th {					
	display:block;  /*tbody内の thをブロックレベルに（セルをやめる）*/				
	border:none;				
	background:#666;				
	color:white				
	}				
table.mytable1 tbody th::before {					
	content:"エリア"  /*tbody内の thの前に エリア と追加	*/			
	}				
table.mytable1 tbody.area1 th {					
	color: #ffc				
}					
table.mytable1 tbody.area2 th {					
	color: #e1f7fa				
}					
				
}