@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 3.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

 ?/*小室追記*/
/*offer*/
.offer .w-inner {
   padding: 4.2% 0 5%;
	position: relative;
}
.first-of .w-inner {
	padding: 0%;
	position: relative;
	}
.offer02 .w-inner {
	padding: 5.7% 0 5%;
	position: relative;
}
.offer03 .w-inner {
	padding: 4.2% 0 5%;
	position: relative;
}

.offer .pr_cta a{
	width:100%;
	position    :relative;
	overflow    :hidden;
}
.offer .btn_2 {
  animation: yureru 2s infinite;
}
.offer .btn_2 a{
 border: solid #fff 3px;
border-radius: 12px;
box-shadow: 1px 1px 10px 0 #a1a1a1;
color: #fff;
display: block;
font-size: 1.3em;
font-weight: bold;
line-height: 1.3;
margin: 1em auto 2em;
padding: 1em 2em .8em;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
vertical-align: middle;
}
.btn-cv.is-red a {
    background: linear-gradient(#F58220,#F36C21);
    width: 75%;
	  text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1);
}
.btn-cv a:before {
    content: "";
    background: url(https://grand-next.jp/journal/wp-content/uploads/2020/08/cta_btn_icon.png) no-repeat;
    background-size: cover;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -.25em;
    position: absolute;
    right: 15px;
    top: 45%;
    animation: yureru2 .8s infinite;
}
/* yureruの動きをここで設定 
@keyframes yureru {
	0% {
		transform: translate(0px, 2px);
	}
	5% {
		transform: translate(0px, -2px);
	}
	10% {
		transform: translate(0px, 2px);
	}
	15% {
		transform: translate(0px, -2px);
	}
	20% {
		transform: translate(0px, 2px);
	}
	25% {
		transform: translate(0px, -2px);
	}
	30% {
		transform: translate(0px, 0px);
	}
} */
/* yureruの動きをここで設定 */
@keyframes yureru2 {
	0% {
		transform: translate(-3px, 0px);
	}
	30% {
		transform: translate(0px, 0px);
	}
}
.offer .btn a:hover span {
	display: inline;
}

.offer .btn a:hover {
	opacity: 1;
}
.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2.8s ease-in-out infinite;
}
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    5% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    5% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    5% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    5% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 768px) {
	.offer .w-inner {
	padding: 10% 0;
	position: relative;
}
	.first-of .w-inner {
		padding: 0px;
	}
	.btn-cv.is-red a {
    background: linear-gradient(#F58220,#F36C21);
    width: 95%;
	  text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1);
}
.offer .btn_2 a{
 border: solid #fff 3px;
border-radius: 12px;
box-shadow: 1px 1px 10px 0 #a1a1a1;
color: #fff;
display: block;
font-size: 18px;
font-weight: bold;
line-height: 1.3;
margin: 1em auto 1.5em;
padding: 1em 2em .8em;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
vertical-align: middle;
}
   .btn-cv a:before {
    content: "";
    background: url(https://grand-next.jp/journal/wp-content/uploads/2020/08/cta_btn_icon.png) no-repeat;
    background-size: cover;
    display: block;
    width: 26px;
    height: 26px;
    margin-top: -0.45em;
    position: absolute;
    right: 5px;
    top: 46%;
    animation: yureru2 .8s infinite;
 }
	}
/*--フッターSP--*/
@media only screen and (max-width: 481px){
.footer {
    background-color: #e0e4eb;
    color: #666;
    padding: 0px 0px 30px 0px;
}
#footer-top {
    background-color: #eaedf2;
    color: #666;
}
#footer-top .widgettitle {
    color: #fff;
	  background: #5b5b5b;
}
.footer a, #footer-top a {
     color: #666;
	   font-weight: 600;
}
.widget.widget_tag_cloud a {
    padding: 0.1em 0.5em;
    margin: 0 0.1em 0.2em 0;
    display: inline-block;
    font-size: 12px!important;
    border-radius: 10px;
    background: #bb9326;
    color: #fff;
    font-weight: bold;
}
#footer-top li {
    border-bottom: 1px dashed rgb(102, 102, 102);
}
.voice .voicecomment {
    border: 3px solid #ddd;
    background-color: #fff;
    color: #444;
    padding: 2.5%;
    position: relative;
    width: 70%;
    border-radius: 5px;
    margin-top: 0px;
}
#toc_container, h3, .li-mainbdr ul, .li-mainbdr ol {
    border-color: #666;
    padding: 0.4em .5em;
    color: #494949;
    background: #f4f4f4;
    border-left: solid 1px #666;
    box-shadow: 0 3px 0px rgb(204, 204, 204);
}
}

/*--------------------------------------
  ふきだしの色を変える（←左）
--------------------------------------*/
.sc {
 border: solid 2px #d5d5d5;/*外枠の線の色*/
 background: #00aced  ;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.sc:before {
 border: 12px solid transparent;
 border-right: 12px solid #d5d5d5;/*ふきだしの線の色*/
 content: "";
}
.sc:after {
 display: inline-block;
 position: absolute;
 border: 12px solid transparent;
border-right: 12px solid #00aced;/*ふきだしの中の色*/
content: "";
}

/*--------------------------------------
  ふきだしの色を変える（右→）
--------------------------------------*/
.right .sc {
 background: #FFB6C0 ;/*ふきだしの中の色*/
  color: #000000;/*文字の色*/
}
.right .sc:before,
.right .sc:after {
 right: -23px;
 left: auto;
 border: 12px solid transparent;
 border-left: 12px solid #d5d5d5;/*ふきだしの線の色*/
}
.right .sc:after {
 right: -20px;
 border-left-color: #FFB6C0 ;/*ふきだしの中の色*/
}

// Webサイトの情報を読み出したブログカードの作り方
// ブログカードの枠の設定
.lc_box {
  display: flex;
  justify-content: space-around;
  border: 1px solid #7f7f7f;
  padding: 10px 20px;
  margin: 0 20px 20px;
  border-radius: 10px;
}
// サムネ枠の設定
.lc_thumb {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-right: 20px;
}
// サムネ画像の設定
.lc_thumb img {
  width: 100%;
  margin: 0;
}
// テキスト枠の設定
.lc_content {
  flex: 2;
}
// タイトル枠の設定
.lc_title {
  font-weight: 600;
  font-size: 20px;
  padding-bottom: 10px;
}
// 説明文の設定
.lc_description {
  font-size: 16px;
}
// マウスホバー時の設定
.lc_box:hover {
  transform: translateY(-5px);
  transition: 0.3s;
  opacity: 0.6;
}

/* 監修者情報 */
.writerArea{
	border:1px solid #dfdfdf;
	margin-bottom:15px;
}
dl.writerDetail dt{
	width:200px;
	padding-top:30px;
	text-align:center;
	font-size:75%;
}
dl.writerDetail dd{
	margin:-200px 10px 0 200px;
	font-size:85%;
	color:#252525;	
}
dl.writerDetail p.h_license{
	margin:-15px 0 8px 0;
}

// ここからスマホ用画面の設定
@media only screen and (max-width: 480px) {
  // スマホの時は縦型にしてます
  .lc_box {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .lc_thumb {
    width: 100%;
    padding-right: 0;
    margin-bottom: 20px;
  }
  .lc_thumb img {
    max-width: 100%;
  }
  .lc_content {
    width: 100%;
  }
  .lc_title {
    font-size: 18px;
  }
  .lc_description {
    font-size: 14px;
  }
	
}

@media screen and (max-width: 480px) {
/* 監修者情報 */
dl.writerDetail dt{
	width:100%;
	margin:0;
	padding:0 10px;
	font-size:115%;
}
dl.writerDetail dd{
	width:100%;
	margin:0;
	padding:0 10px;
}
dl.writerDetail dd span.h_writer_name{
	display:none;
}
dl.writerDetail dd p.h_writer_btn{
	text-align:center;
}
}

/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#00C43E;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#F8F5E3;
 color:#00C43E;
}

/* CF7ラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
margin-top:5px;
display: block;
}

/*------------------------------------------------------------
ランキング詳細部分
-------------------------------------------------------------*/
.hyouka-main-wrap > *:not(:last-child) {
margin-bottom: 20px;
}
.hyouka-main-wrap > p:not(:last-child) {
margin-bottom: 30px;
}
.hyouka-main-wrap .gachaBtn{
margin: 0 auto;
background: #ffd703;
color: #000;
font-size: 18px;
border-radius: 6px;
border: 2px solid #000;
position: relative;
}
.hyouka-main-wrap .gachaBtn:hover{
opacity:0.6;
}
.hyouka-main-wrap .gachaBtn:before{
content: '';
display: block;
width: 26px;
height: 26px;
background: url(https://ieagent.jp/kurashi-plus/wp-content/uploads/2021/07/2021y05m20d_1203421412.png) no-repeat center / contain;
position: absolute;
right: 40px;
top: 0;
bottom: 0;
margin: auto;
}
main article div.article_content .hyouka-main-wrap{
background: #FFF;
position: relative;
padding: 0;
margin-bottom: 60px;
}
main article div.article_content .hyouka-main-wrap:last-child{
margin-bottom: 0;
}
.hyouka-main-wrap .hyouka-h3-name{
background: #000;
background: repeating-linear-gradient(314deg, #518bcc, #518bcc 6px, #5a91ce 6px, #5a91ce 16px);
color: #fff;
border-radius: 0;
position: relative;
font-size: 20px;
width: auto;
margin-bottom:20px;
padding: 10px 10px 10px 0;
border:0;
}
.hyouka-main-wrap .h-main-name{
background:none;
margin:0;
padding: 0 0 0 72px;
color:#FFF;
line-height:normal;
	border:0;
}
.hyouka-main-wrap .h-main-name .sub-text{
display: block;
font-size: 14px;
line-height: normal;
color: #e1f1ff;
margin: 1px 0 0 0;
font-weight: normal;
padding: 0;
}
.hyouka-main-wrap .hyouka-h3-name p{
background:none;
margin:1px 0 0 0;
padding:0;
line-height:normal;
color:#e1f1ff;
padding: 0 0 0 72px;
font-size:14px;
}
.hyouka-main-wrap .h-main-name:before{
content: '';
position: absolute;
top: -15px;
left: 15px;
font-size: 24px;
font-weight: bold;
color: #FFF;
z-index: 3;
bottom: auto;
margin: 0;
width: 38px;
height: 38px;
line-height: 43px;
text-align: center;
background: #777;
}
.hyouka-main-wrap.h-no1 .h-main-name:before{
content: '1';
background: #dbbd4f;
}
.hyouka-main-wrap.h-no2 .h-main-name:before {
content: '2';
background: #c2c2c2;
}
.hyouka-main-wrap.h-no3 .h-main-name:before {
content: '3';
background: #9a6345;
}
.hyouka-main-wrap.h-no4 .h-main-name:before{
content: '4';
}
.hyouka-main-wrap.h-no5 .h-main-name:before{
content: '5';
}
.hyouka-main-wrap.h-no6 .h-main-name:before{
content: '6';
}
.hyouka-main-wrap.h-no7 .h-main-name:before{
content: '7';
}
.hyouka-main-wrap.h-no8 .h-main-name:before{
content: '8';
}
.hyouka-main-wrap.h-no9 .h-main-name:before{
content: '9';
}
.hyouka-main-wrap.h-no10 .h-main-name:before{
content: '10';
}
.hyouka-main-wrap.h-no11 .h-main-name:before{
content: '11';
}
.hyouka-main-wrap.h-no12 .h-main-name:before{
content: '12';
}
.hyouka-main-wrap.h-no13 .h-main-name:before{
content: '13';
}
.hyouka-main-wrap.h-no14 .h-main-name:before{
content: '14';
}
.hyouka-main-wrap.h-no15 .h-main-name:before{
content: '15';
}
.hyouka-main-wrap.h-no16 .h-main-name:before{
content: '16';
}
.hyouka-main-wrap.h-no17 .h-main-name:before{
content: '17';
}
.hyouka-main-wrap.h-no18 .h-main-name:before{
content: '18';
}
.hyouka-main-wrap.h-no19 .h-main-name:before{
content: '19';
}
.hyouka-main-wrap.h-no20 .h-main-name:before{
content: '20';
}
.hyouka-main-wrap .h-main-name:after{
content: '';
position: absolute;
display: block;
left: 15px;
top: 22px;
height: 0;
width: 0;
border-left: 19px solid #777;
border-right: 19px solid #777;
border-bottom: 10px solid transparent;
z-index: 2;
}
.hyouka-main-wrap.h-no1 .h-main-name:after{
border-color:#dbbd4f;
border-bottom-color: transparent;
}
.hyouka-main-wrap.h-no2 .h-main-name:after{
border-color:#c2c2c2;
border-bottom-color: transparent;
}
.hyouka-main-wrap.h-no3 .h-main-name:after{
border-color: #9a6345;
border-bottom-color: transparent;
}
.hyouka-main-wrap:before{
position: absolute;
content: '';
top: -5px;
left: 10px;
border-bottom: solid 8px #555;
border-left: solid 6px transparent;
}
.hyouka-main-wrap.h-no1:before{
border-bottom: solid 8px #927b35;
}
.hyouka-main-wrap.h-no2:before{
border-bottom: solid 8px #9f9f9f;
}
.hyouka-main-wrap.h-no3:before{
border-bottom: solid 8px #584e49;
}
.hyouka-main-wrap .hyouka-main-head{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hyouka-main-wrap .hyouka-main-icon{
width: 130px;
height: 130px;
display: flex;
align-items: center;
}
.hyouka-main-wrap .hyouka-main-icon img{
width: 100%;
max-height: 100%;
object-fit: contain;
}
.hyouka-main-wrap .hyouka-main-head ul{
width: 50%;
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
box-sizing: border-box;
padding-left: 20px;
}
.hyouka-main-wrap .hyouka-main-head li{
font-size: 24px;
font-weight: bold;
line-height: 1;
}
.hyouka-main-wrap .hyouka-main-head li:first-child{
margin-bottom: 10px;
}
.hyouka-main-wrap .hyouka-main-head .hyouka-hoshi-icon{
color: #fba000;
font-size: 32px;
margin-left: 10px;
}
.hyouka-main-wrap .hyouka-main-head .gachaBtn{
width: 100%;
    display: block;
    text-align: center;
    margin: 20px 0 0;
    line-height: 46px;
    padding: 0;
}

h10 {
  position: relative;
  padding: 0.3em 0.5em;
  background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  color: #495193;
}

.entry-content .box26 {
    border-color: #FFBD58;
}
.entry-content .box26 .box-title {
  color: #FFBD58;
}
/* a8マッハバイト広告用 */
#a8_wrap{
margin: 20px 0;
padding: 10px;
background-color: #eaf5ff;
}
#a8_2cel{
width:100%;
padding:20px;
display: flex;
border:solid 1px #f88080;
}
#a8_2cel .left_box{
width:150px;
}
#a8_2cel .right_box{
width:450px;
padding:20px 0;
display: table-cell;
vertical-align: middle;
}
#a8_btn{
width:80%;
margin: 20px auto 0;
padding: 10px;
text-align:center;
background-color: #f88080;
font-weight:bold;
}
#a8_btn a{
color:#FFF;
}

google-auto-placed .google-auto-placed{
  display: none;
}

/* ボタンデザイン */
.btn_01{
    background-color: #f5a15f;
    border-radius: 8px;
    box-shadow: 0 4px 0 #ce8a55;
    color: #fff;
    display: block;
    padding: 8px;
    position: relative;
    text-align: center;
    text-decoration: none;
	font-weight:bold;
    width: 70%;
	margin: auto;
}
.btn_01::after{
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #fff;
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.btn_01:active{
  top: 4px;
    box-shadow: 0 0 0 #b6601c;
}

.movie-wrap {
	position: relative;
	width: 100%; !important;
	padding-top: 56.25%;
}
 
.movie-wrap iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
add_filter( 'ppp_nonce_life', 'my_nonce_life' );
function my_nonce_life() {
	return 60 * 60 * 24 * 7;	// 7 日間（秒×分×時間×日）
}