@charset "utf-8";


/*

	SP STYLE

**************************************************************/

#policy #contentsmask {background: rgba(0,0,0,0.5); position: fixed; height: 200vh;}

.pagetitle {background: rgba(0,0,0,0.5); height: calc(281/640*100vw); padding-top: calc(60/640*100vw); zoom:1;}
#top pagetitle {background: none;}
.pagetitle h1{margin-bottom: calc(50/640*100vw); text-align: center; padding-bottom:calc(113/640*100vw); position: relative;}
.pagetitle h1 img {display: block; margin: 0 auto;}
.pagetitle h1 img + img {margin-top: 0; height: calc(77/640*100vw); width: auto; position: absolute; left: 50%; bottom: 0; margin-left: calc(-496/640*100vw)}
.pagetitle h1 img + img[src*='-20'] {height: calc(46/640*100vw);margin-left: calc(-296/640*100vw); bottom: calc(16/640*100vw)}
.pagetitle nav a{width: calc(51/640*100vw); height: auto; display: block; position: absolute; right: calc(45/640*100vw); top: calc(149/640*100vw); border-radius: 100%; overflow: hidden;}
.pagetitle nav a.prev {right: inherit; left: calc(45/640*100vw); transform: rotate(180deg);}

#policy main section {padding: calc(70/640*100vw) 0 calc(80/640*100vw); background-color: rgba(0,0,0,0); transition: none; border-bottom: 1px solid rgba(0,0,0,0.5);}

#policy .policy-bg {max-width: calc(580/640*100vw); margin: 0 auto 0; }
#policy .policy-text {padding: calc(90/640*100vw) calc(40/640*100vw) calc(30/640*100vw);  background-color:rgba(255,255,255,0.85); color:#555555; text-align: left;}	
#policy .policy-text h2{font-size: calc(22/640*100vw); margin-bottom: calc(30/640*100vw); font-weight: bold;} 		
#policy .policy-text p{font-size: calc(18/640*100vw); line-height: calc(35/640*100vw); padding-bottom:calc(60/640*100vw); }		
#policy .policy-text p span{font-size: calc(16/640*100vw);}	

article {padding-bottom: calc(40/640*100vw);}
article .pagetitle {padding-bottom: calc(60/640*100vw); height: auto; margin-bottom: calc(40/640*100vw);}
article .pagetitle h1 {font-size: calc(28/640*100vw); line-height: calc(38/640*100vw); padding-bottom: 0; margin-bottom: calc(15/640*100vw); margin-top: calc(23/640*100vw); letter-spacing: 0.2em;}
article .pagetitle h2 {font-size: calc(13/640*100vw); line-height: calc(22/640*100vw); letter-spacing: 0.2em;}
article .pagetitle h1,
article .pagetitle h2 {text-shadow: 0 0 6px rgba(255,255,255,1);}
article .pagetitle ul {display: flex; justify-content: center; margin-top: calc(30/640*100vw);}
article .pagetitle ul li {position: relative; overflow: hidden; display: inline-block; margin: 0 calc(10/640*100vw);}
article .pagetitle ul li a::after {border: calc(3/640*100vw) solid #fff; content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; border-radius:2.813vw;}
article .pagetitle ul li img{height: calc(37/640*100vw); width: auto; position: relative; z-index: 0;}
article .pagetitle ul li a{position: relative; z-index: 10; display: block;}

article .ss {padding: 0 calc(20/640*100vw);}
article .ss li + li {margin-top: calc(30/640*100vw);}
article .ss + .ss {padding-top: calc(60/640*100vw);}
article .ss.half {display: flex; align-items: flex-start; align-content: flex-start;}
article .ss.half li {width:46.875vw; text-align: left;}
article .ss.half li img {width: 44.688vw;}
article .ss.half li + li {margin-top: 0;}
article .ss.half li:nth-child(even) {text-align: right;}
article .ss.half li:nth-child(n+3)  {padding-top: calc(30/640*100vw);}

#policy main p.small{font-size:2vw; line-height: 3vw;}
#policy main article + p.small{ margin: 4vw 0;}

@media screen and (min-width:641px){

#policy #contentsmask {background: rgba(0,0,0,0);}
body#policy #contentsmask.detail {background: rgba(0,0,0,0.5);}

/*

	PC STYLE

**************************************************************/

.pagetitle {height: 300px; padding-top: 76px;}
.pagetitle h1 {margin-bottom: 0px; padding-bottom: 0;}
.pagetitle h1 img + img {margin-top: 36px; height: 93px; position: static; margin-left: auto;}
.pagetitle nav a{width: 92px; }
.pagetitle nav a.prev{left: 50%; margin-left: -490px; top: 152px;}
.pagetitle nav a.next{left: 50%; margin-left: 395px; top: 152px;}
.pagetitle h1 img + img[src*='-20'] {height: 93px; margin-left:auto;}

#policy main section {padding: 0px 0 80px;}
#policy .policy-bg {max-width: 1240px; margin:75px auto 0; }
#policy .policy-text {padding: 160px 220px 90px; background-color:rgba(255,255,255,0.85); color:#555555; text-align: left;}	
#policy .policy-text h2{font-size: 19px; margin-bottom: 20px; font-weight: bold;} 		
#policy .policy-text p{font-size: 15px; line-height: 30px; padding-bottom: 50px;}		
#policy .policy-text p span{font-size: 13px;}		
	

article {padding-bottom: 40px;}
article .pagetitle {padding-bottom: 60px; height: auto; margin-bottom: 70px;}
article .pagetitle h1 {font-size: 28px; line-height: 38px; margin-bottom: 15px; margin-top: 23px;}
article .pagetitle h2 {font-size: 13px; line-height: 22px;}
article .pagetitle h1,
article .pagetitle h2 {text-shadow: 0 0 10px rgba(255,255,255,1);}
article .pagetitle ul {margin-top: 30px;}
article .pagetitle ul li {border-radius:18px; margin: 0 10px;}
article .pagetitle ul li a::after {border: 3px solid #fff; border-radius:18px;}
article .pagetitle ul li img{height: 37px;}


article .ss {padding: 0 40px; width: 100%; max-width: 1400px; min-width: 1200px; margin: 0 auto; display: block;}
article .ss li + li {margin-top: 70px;}
#contents main article .ss li img {width: 100%; height: auto;}
article .ss + .ss {padding-top: 70px;}
article .ss.half {display: flex; align-items: flex-start; align-content: flex-start; justify-content: center;}
article .ss.half li {width:auto; padding: 0 34px;}
#contents article .ss.half li img {width: 525px;}
article .ss.half li:nth-child(n+3)  {padding-top: 34px;}

}


/* scroll in */
#policy .ss img{
  opacity: 0;
/*  filter: brightness(0.5);*/
  will-change: transform, opacity;
  transform-style: preserve-3d;
  transform: translate3d(0,25vh,20vh) perspective(80vh);
  transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) , opacity 1s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#policy .ss img.animated{
  /*filter: brightness(1);*/
  opacity: 1;
  transform: translate3d(0,0,0);
}