@charset "utf-8";

/* -----------------------------------------------
CSS file
FileName:common.css
Author:fancs&co.
UpdatedBy:hirata
----------------------------------------------- */

/*----------------------------------------------------
	layout[共通]
----------------------------------------------------*/

/*----------------------------------------------------
	layout[PC（デスクトップ）]
----------------------------------------------------*/

/* 背景色が変化するロールオーバー
----------------------------------------------------*/
.rollover01 a{
	display:block;
	width:100%;
	position: relative;
	background:#000;
}

.rollover01 a::after{
	content: "";
  	position: absolute;
  	z-index: -1;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	background:url(../img/common/ico_arrow01.png) no-repeat right 8px top 21px / 4px 8px;
	-webkit-transition-property:background;
  	transition-property:background;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
}

.rollover01 a:link,
.rollover01 a:visited{
	color:#e60012;
}

.rollover01 a:hover,
.rollover01 a:focus,
.rollover01 a:active{
	color:#FFF;
}

.rollover01 a:hover:after{
	background:url(../img/common/ico_arrow02.png) no-repeat right 8px bottom 21px / 4px 8px;
}

.rollover01 a:hover{
	background:#F00;
	transition: 0.3s ease-out;
}

/* 縦方向に背景がアニメーションするロールオーバー
----------------------------------------------------*/
.rollover02 a{
	display:block;
	height:50px;
	line-height:50px;
	width:100%;
	position: relative;
	-webkit-transform: translateZ(0);
 	transform: translateZ(0);
  	-webkit-transition-property: color;
  	transition-property: color;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
}

.rollover02 a::before{
	content: "";
  	position: absolute;
  	z-index: -2;
	width:100%;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	background:rgba(240,200,0,0.8);
  	-webkit-transform: scaleY(0);
  	transform: scaleY(0);
  	-webkit-transform-origin: 50% 50px;
  	transform-origin: 50% 50px;
  	-webkit-transition-property: transform;
  	transition-property: transform;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
  	-webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;
}

.rollover02 a::after{
	content: "";
  	position: absolute;
  	z-index: -1;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	background:url(../img/common/ico_arrow01.png) no-repeat right 8px top 21px / 4px 8px;
	-webkit-transition-property:background;
  	transition-property:background;
  	-webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;
}

.rollover02 a:link,
.rollover02 a:visited{
	color:#e60012;
}

.rollover02 a:hover,
.rollover02 a:focus,
.rollover02 a:active{
	color:#FFF;
}

.rollover02 a:hover:after{
	background:url(../img/common/ico_arrow02.png) no-repeat right 8px bottom 21px / 4px 8px;
}

.rollover02 a:hover:before{
	-webkit-transform: scaleY(1);
  	transform: scaleY(1);
}

/* ナビゲーションボタンの画像が拡大・縮小するロールオーバー
----------------------------------------------------*/
.rollover03 {
	margin: 0px auto;
	text-align:center;
	padding: 0 20px;
	width: calc(100% - 40px);
	max-width: 1320px;
}

.rollover03 li {
	display: inline-block;
	border-right:#dc4d5c solid 1px;
	overflow:inherit;
	vertical-align:top;
	height:3.5vw;
	max-height:46px;
	padding:10px 0 20px;
	-webkit-transition:0.3s ease-out;
	transition:0.3s ease-out;
	position:relative;
}

.rollover03 li:hover{
	-webkit-transition:0.3s ease-out;
	transition:0.3s ease-out;
	height:4.2vw;
	max-height:56px;
	transform-origin:middle center;
}

.rollover03 li::after {
	content:"";
	background:rgba(255,226,0,0);
	width:46px;
	height:46px;
	border-radius:23px;
	position:absolute;
	top:10px;
	left:50%;
	margin-left:-23px;
	-webkit-transition:0.3s ease-out;
	transition:0.3s ease-out;
}

.rollover03 li:hover:after {
	content:"";
	background:rgba(255,226,0,0.5);
	width:76px;
	height:76px;
	border-radius:38px;
	top:0;
	left:50%;
	margin-left:-38px;
}

.rollover03 li:nth-child(1) {
	width:calc((100% - 324px) * 0.19);
}

.rollover03 li:nth-child(2) {
	width:calc((100% - 324px) * 0.16);
}

.rollover03 li:nth-child(3) {
	width:calc((100% - 324px) * 0.13);
}

.rollover03 li:nth-child(4) {
	width:calc((100% - 324px) * 0.18);
}

.rollover03 li:nth-child(5) {
	width:calc((100% - 324px) * 0.16);
}

.rollover03 li:nth-child(6) {
	width:calc((100% - 324px) * 0.14);
}

.rollover03 li:first-child {
	padding-left:0;
}

.rollover03 li:last-child {
	padding-right:0;
	border-right:0;
}

.rollover03 li:nth-child(3){
	margin-right:140px;
	border-right:0;
}

.rollover03 li:nth-child(4){
	margin-left:140px;
}

.rollover03 li img{
	height:100%;
	max-height:46px;
	-webkit-transition:0.3s ease-out;
	transition:0.3s ease-out;
}

.rollover03 li:hover img{
	height:100%;
	max-height:56px;
}

/* 画像がモノトーン（白黒）になるロールオーバー
----------------------------------------------------*/
.rollover04 li img{
	width:100%;
	opacity: 1;
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
  	-webkit-transition: .3s ease-out;
  	transition: .3s ease-out;
	/*背景色と同じ色のボーダーをあらかじめ付けておく*/
	border:#202749 solid 1px;
}

.rollover04 li:hover img{
	-webkit-filter: grayscale(100%);
 	filter: grayscale(100%);
	border:#FFF solid 1px;
}

/* 画像が光るロールオーバー
----------------------------------------------------*/
.rollover06 li{
	-webkit-filter: brightness(100%);
  	filter: brightness(100%);
  	-webkit-transition: 0.3s ease-out;
  	transition: 0.3s ease-out;
}

.rollover06 li:hover{
	-webkit-filter:brightness(110%);
 	filter: brightness(110%);
}

/* 背景画像が回転するロールバー
----------------------------------------------------*/
.section .rollover05 a:hover h2:after{
	-webkit-animation:'rotate-anime02' 2s linear infinite;
	animation:'rotate-anime02' 2s linear infinite;
}

@-webkit-keyframes rotate-anime02 {
	0% {transform: rotate(0) scale(1.0);}
	50% { transform: rotate(180deg) scale(0.9);}
	100% {transform: rotate(360deg) scale(1.0);}
}

@keyframes rotate-anime02 {
	0% {transform: rotate(0) scale(1.0);}
	50% { transform: rotate(180deg) scale(0.9);}
	100% {transform: rotate(360deg) scale(1.0);}
}

/* 背景画像が回転しながら拡大・縮小
----------------------------------------------------*/
#header_content p.logo_header_roll::after {
	content:url(../img/common/logo_asahi_02.png);
	height: 194px;
	width: 194px;
	position: absolute;
	top: 0;
	left: 19px;
	z-index: 1;
	-webkit-animation:'rotate-anime' 16s linear infinite;
	animation:'rotate-anime' 16s linear infinite;
}

@-webkit-keyframes rotate-anime {
	0% {transform: rotate(0) scale(1.0);}
	10% {transform: rotate(36deg) scale(0.75);}
	20% {transform: rotate(72deg) scale(1.0);}
	30% {transform: rotate(108deg) scale(0.75);}
	40% {transform: rotate(144deg) scale(1.0);}
	50% { transform: rotate(180deg) scale(0.75);}
	60% {transform: rotate(216deg) scale(1.0);}
	70% {transform: rotate(252deg) scale(0.75);}
	80% {transform: rotate(288deg) scale(1.0);}
	90% {transform: rotate(324deg) scale(0.75);}
	100% {transform: rotate(360deg) scale(1.0);}
}

@keyframes rotate-anime {
	0% {transform: rotate(0) scale(1.0);}
	10% {transform: rotate(36deg) scale(0.75);}
	20% {transform: rotate(72deg) scale(1.0);}
	30% {transform: rotate(108deg) scale(0.75);}
	40% {transform: rotate(144deg) scale(1.0);}
	50% { transform: rotate(180deg) scale(0.75);}
	60% {transform: rotate(216deg) scale(1.0);}
	70% {transform: rotate(252deg) scale(0.75);}
	80% {transform: rotate(288deg) scale(1.0);}
	90% {transform: rotate(324deg) scale(0.75);}
	100% {transform: rotate(360deg) scale(1.0);}
}

/* はずみながら回転して拡大・縮小
----------------------------------------------------*/
@-webkit-keyframes scale1 { 
  0% {
    transform: scale(1.3) rotate(0);
  }
 
  70% {
    transform: scale(0.5) rotate(30deg);
  }
 
  90% {
    transform: scale(1.5) rotate(-15deg);
  }
 
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes scale1 { 
  0% {
    transform: scale(1.3) rotate(0);
  }
 
  70% {
    transform: scale(0.5) rotate(45deg);
  }
 
  90% {
    transform: scale(1.5) rotate(-15deg);
  }
 
  100% {
    transform: scale(1) rotate(0);
  }
}

/* はずみながら拡大・縮小
----------------------------------------------------*/
@-webkit-keyframes scale2 { 
  0% {
    transform: scale(0.5);
	opacity:0;
  }
 
  70% {
    transform: scale(1.2);
	opacity:1;
  }
 
  90% {
    transform: scale(0.8);
	opacity:1;
  }
 
  100% {
    transform: scale(1);
	opacity:1;
  }
}

@keyframes scale2 { 
  0% {
    transform: scale(0.5);
	opacity:0;
  }
 
  70% {
    transform: scale(1.2);
	opacity:1;
  }
 
  90% {
    transform: scale(0.8);
	opacity:1;
  }
 
  100% {
    transform: scale(1);
	opacity:1;
  }
}

/* 回転
----------------------------------------------------*/
@-webkit-keyframes rotate1 { 
  0% {
    transform: rotate(-45deg);
  }
 
  100% {
    transform: rotate(0);
  }
}

@keyframes rotate1 { 
  0% {
    transform: rotate(-45deg);
  }
 
  100% {
    transform: rotate(0);
  }
}

/* アコーディオン（FAQ）
----------------------------------------------------*/
ul.open > li > dl > dt{
	cursor:pointer;
	color:#da3266;
	font-size:1.1em;
	font-weight:400;
	padding-bottom:10px;
	padding-right:40px;
	position:relative;
}

ul.open > li > dl > dt::after{
	content:url(../../img/common/ico_arrow_off.png);
	position:absolute;
	right:0;
	top:3px;
}

ul.open > li > dl > dt:active:after{
	content:url(../../img/common/ico_arrow_on.png);
}

ul.open > li > dl > dd{
	display:none;
	overflow:hidden;
}

ul.list_faq > li > dl > dt::before{
	content:"A.";
}

ul.list_faq > li > dl > dd::before{
	content:"Q.";
}

ul.list_faq > li > dl > dt::before,
ul.list_faq > li > dl > dd::before{
	font-size:1.1em;
	font-weight:700;
	padding-right:0.5em;	
}

ul.list_faq > li > dl > dt,
ul.list_faq > li > dl > dd{
	text-indent:-1.75em;
	padding-left:1.75em;
}

/* パララックス（フェードイン）
----------------------------------------------------*/
/* fadein.jp を読み込み必須*/
/* フェードインさせる要素に .fadein をつける*/

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition:all 0.5s;
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/* パララックス（背景）
----------------------------------------------------*/
/* parallax.js を読み込み必須*/
/* 背景をスクロールさせる要素に class="parallax-window" data-parallax="scroll" data-image-src="img/common/img_bg_01.jpg" をつける*/
/* fadein.jp との併用不可*/

.parallax-window {
     background: transparent;
}

.parallax-slider {
     top: 0;
     left: 0;
}

/*----------------------------------------------------
	layout[PC（ノート）]
----------------------------------------------------*/

@media screen and ( max-width:1280px) {


}

/*----------------------------------------------------
	layout[タブレット]
----------------------------------------------------*/

@media screen and ( max-width:1024px) {

/* open
----------------------------------------------------*/
ul.open > li > dl > dt{
	padding-right:15%;
}

}

/*----------------------------------------------------
	layout[スマートフォン（標準）]
----------------------------------------------------*/

@media screen and (max-width:768px){
	
}