@charset "utf-8";

/*  ---------    PC    ----------  */

@media (min-width: 576px) {

       
 

/*============================
コンテンツ領域　PC
============================*/

/*-- 基本書式 --*/


/*--暫定消去 --*/
.aside-sp, .drawer-sp{
display:none;
}

.period{
width:800px;
padding:0 200px;
margin:0 auto;
}

.number-area{
padding:0 20px;
}

.number-area div{
display:inline-block;
}

.number{
color:#C7DEF3;
font-size:260px;
font-family: sans-serif;
font-weight: 700;
letter-spacing: -15px;
position:relative
}

.number-before{
padding-right:20px;    
}

.number-before:after{
position:absolute;    
display:inline-block;
content:" ";
color:#C7DEF3;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #C7DEF3;
top:130px;
right:-20px;
}

.number-before + .number{
padding-left:20px;    
}

.title-area{
}

.year{
font-size:20px;
color:#4178eb;
font-family: 'Mplus 1p';
font-weight: 700;
transform: rotate(0.001deg);
}

.title{
font-size:55px;
color:#4178eb;
font-family: 'Mplus 1p';
font-weight: 800;
letter-spacing:5px;
line-height:90px;
transform: rotate(0.001deg);
/* -- フォントサイズなど20180705修正 -- */
}

.text{
width:530px;
font-size:16px;
line-height:1.75;
}


/*-- 位置の調整 --*/

.front{
position:relative;
height:700px;
padding-bottom:100px;
}

.front-background{
position:absolute;
top:0;
height:700px;
background-color:#C7DEF3;
transform: skewy(-15deg);
overflow: hidden;
}

.front-background .photo-area{
transform: skewy(15deg);
}


.front .number-area{
position:absolute;
right:-200px;
}

.front .number{
color:#ffffff;
}

.front .number:after{
border-left: 20px solid #ffffff;
}

.front .title-area{
position:absolute;
top:0;
left:0;
}

.year{
margin-top:150px;
}

.title{
margin-top:30px;
}

.front .text{
float:right;
border-top:4px solid #4178eb;
padding-top:30px;
margin-top:30px;  
margin-left:270px;
}

.front .photo-area{
position:absolute;
top:200px;
background-color:transparent;
mix-blend-mode:multiply;
}

.times li{
position:relative;
height:800px;
}

.li-background{
position:absolute;
bottom:0;
height:1px;
background-color:#C7DEF3;
transform: skewy(-15deg);
}

.times li{
z-index:10;
}

.times li .number-area{
z-index:17;    
}

.times li .year{
margin-top:100px;
}

.times li .title-area{
z-index:20;    
width:560px;/* -- 20180705追加 -- */
}

.times li .title-area .text{
width:300px;    
}

.times li:nth-child(odd) .year{
text-align:right;
}


.times li:nth-child(odd) .title-area .text{
padding-left:260px;    
}

.times li:nth-child(even) .title-area .text{
padding-right:260px;    
}


.times li .photo-area{
z-index:15;    
}


.times li:nth-child(odd) .number-area{
position:absolute;
right:-200px;
}

.times li:nth-child(even) .number-area{
position:absolute;
left:-200px;
}


.times li:nth-child(odd) .title-area{
position:absolute;
right:0px;   
}

.times li:nth-child(even) .title-area{
position:absolute;
left:0px;      
}

.times li .title + .text:before{
content:"";
display:block;
border-top:4px solid #4178eb;
margin:30px 0;
width:70px;
}

.times li a{
}

.times li .link{
height:70px;
line-height:70px;
z-index:10;
margin-top:30px;
display:block;
width:300px;
}

.times li:nth-child(odd) .link{
padding-left:260px;    
}

.times li:nth-child(even) .link{
padding-right:260px;    
}

.times li:nth-child(odd) .link .text{
padding-left:0px;    
}

.times li:nth-child(even) .link .text{
padding-right:0px;    
}

.times li .arrow{
position: relative;
display: block;
margin-right: 10px;
width:70px;
height:70px;
background-color:#4178eb;
float:left;
transition: 0.3s ease-out;
}

.times li .arrow:before{
content: '';
width: 20px;
height: 20px;
border: 0px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 33%;
left: 17px;
transition: 0.2s ease-out;
}

.times li .arrow + .text{
font-size:16px;
line-height:70px;
font-weight:bold;
width:auto;
display: block;
}

.times li a .arrow + .text{
color:#333333;
transition: all .2s;
}

.times li .link:hover .arrow:before{
content: '';
width: 35px;
height: 35px;
border: 0px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 23%;
left: 5px;
}

.times li .link:hover .arrow + .text{
font-size:20px;
color:#4178eb;
}


.times li .photo-area{
width:600px;
height:700px;
}

.times li .photo-inner{
width:600px;
height:700px;
position:relative;
}

.times li .photo-frame img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
max-width: 600px;
max-height: 600px;
margin: auto;
border:4px solid #000000;
box-sizing:border-box;
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
opacity:0.7;/* -- 20180705追加 -- */
}

.times li .photo-area .photo-caption{
display:none;
}

.times li:nth-child(odd) .photo-area{
position:absolute;
top:0;
left:-150px;
}

.times li:nth-child(even) .photo-area{
position:absolute;
top:0;
right:-150px;    
}

.rellax{
transform: translate3d(0, 0, 0);
transition: 500ms ease-out;
/*　will-change: animation, position;*/
}


/*============================
ナビゲーション・PC
============================*/

/*-- nav pc --*/

.nav-pc{
position: fixed;
top: 0;
left: 20px;
z-index: 100;
width: 200px;
height: 100%;
opacity: 1;
transition: opacity 1s cubic-bezier(0,.5,.5,1) 500ms,transform 750ms cubic-bezier(0,.5,.5,1) 500ms;
}

.nav-pc-inner{
width:100%;
height:100%;
position:relative;
}

.nav-area{
position:absolute;
top:0;
bottom:0;
margin:auto;
height:385px;
}

.nav-area li{
height:35px;
line-height:35px;
}

.nav-area li .nihongo{
font-size:12px;
}

.nav-area .number{
color:#333333;
font-size:16px;
font-family: sans-serif;
font-weight: 700;
letter-spacing: -1px;
position:relative;
display:inline-block;
  transition: all .3s;
}

.nav-area .number-before{
padding-right:0;
padding-left:0;

}

.nav-area .number-before:after{
position:absolute;    
display:inline-block;
content:" ";
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid #333333;
top:15px;
right:-6px;

}

.nav-area .number-before + .number {
padding-left: 7px;
}

.nav-number-caption{
display:inline-block;
opacity:0;
  transition: all .3s;
}

.nav-area li a{
color:#333333;
  transition: all .3s;
}

.nav-area li a.active ,
.nav-area li a.active .number{
color:#4178eb;
}

.nav-area li a.active .number-before:after{
border-left: 3px solid #4178eb;    
}

.nav-area li:hover a{
zoom:1.25;
}

.nav-area li:hover .nav-number-caption{
font-size:14px;
opacity:1;
font-weight:bold;
}

.nav-area li:hover .number-before:after{
top:11px!important;
}

/*-- aside pc + drowermenu --*/

.aside-pc{
position: fixed;
top: 0;
right: 20px;
z-index: 300;
width: 200px;
height: 100%;
opacity: 1;
transition: opacity 1s cubic-bezier(0,.5,.5,1) 500ms,transform 750ms cubic-bezier(0,.5,.5,1) 500ms;
}

.aside-pc-area{
position:absolute;
top:0;
bottom:0;
margin:auto;
height:385px;
}

.drawer-title{
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
display:inline;
/* transform:translate(-50%,0);*/
font-size:16px;
color:#333333;
font-family: 'Mplus 1p';
transform: rotate(0.001deg);
font-weight:500;
line-height:16px;
margin:20px 0px 0 0;
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer-hamburger:hover .drawer-title{
color:#4178eb;
}

.drawer-hamburger:hover .drawer-hamburger-icon,
.drawer-hamburger:hover  .drawer-hamburger-icon:after,
.drawer-hamburger:hover  .drawer-hamburger-icon:before{
background-color: #4178eb;
}


.drawer-open .drawer-hamburger:hover .drawer-title{
color:#ffffff;
}

.drawer-open .drawer-hamburger:hover .drawer-hamburger-icon{
background-color: transparent;
}
.drawer-open .drawer-hamburger:hover  .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger:hover  .drawer-hamburger-icon:before{
background-color:#ffffff;
}

.drawer-open .drawer-title{
color:#ffffff;    
}




/*============================
drowerメニュー　PC向け
============================*/

/*!------------------------------------*\
    Base
\*!------------------------------------*/

.drawer-open {
  overflow: hidden!important
}

.drawer-nav {
  position: fixed;
  z-index: 102;
  top: 0;
  overflow: hidden;
  width: 500px;
  height: 100%;
  color: #222;
  background-color: #fff;
}

.drawer-menu {
  margin: 0;
  padding: 0;
  list-style: none
}

.drawer-menu-item {
  font-size: 1pc;
  font-size: 1rem;
  display: block;
  padding: 9pt;
  padding: .75rem;
  text-decoration: none;
  color: #222
}

.drawer-menu-item:hover {
  text-decoration: underline;
  color: #555;
  background-color: transparent
}

/*! overlay */

.drawer-overlay {
  position: fixed;
  z-index: -101;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  transition: opacity 1s;
}

.drawer-open .drawer-overlay {
  opacity:1;
  z-index: 101;
}


/*!------------------------------------*\
    Right
\*!------------------------------------*/

.drawer--right .drawer-nav {
  right: -500px;
  -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)
}

.drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0
}

.drawer--right.drawer-open .drawer-hamburger {
  right: 500px;
}


/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

.drawer-hamburger {
  position: fixed; 
  top: 0;
  right:20px;
  display: block;
  box-sizing: content-box;
  width: 2pc;
  width: 2rem;
  padding: 0;
  padding-right: 9pt;
  padding-left: 9pt;
  padding: 18px .75rem 30px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  border: 0;
  outline: 0;
  background-color: transparent;
  z-index:300;
  overflow: hidden;
}

.drawer-hamburger:hover {
  cursor: pointer;
  background-color: transparent;

}

.drawer-hamburger-icon {
  position: relative;
  display: block;
  margin-top: 10px
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  width: 100%;
  height: 2px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #222
}

.drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  position: absolute;
  top: -10px;
  left: 0;
  content: ' '
}

.drawer-hamburger-icon:after {
  top: 10px
}

.drawer-open .drawer-hamburger-icon {
  background-color: transparent; 
}

.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
  top: 0;
  background-color:#ffffff;
}

.drawer-open .drawer-hamburger-icon:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}




/*============================
テーブルレイアウト
============================*/

.drawer-pc-inner{

}

.drawer-pc .table-title{
    width:440px;
    margin:30px 30px 0 30px;
    height:40px;
    line-height:40px;
    font-size:16px;
    color:#ffffff;
    background-color:#4178eb;
    text-align:center;
}

.drawer-pc .table-title2{
    border-bottom:1px solid #ffffff;
    height:30px;
}

.drawer-pc .table-caption{
    margin:10px 40px 20px 10px;
    text-align:right;
    font-size:14px;
}

.drawer-pc table{
  font-size:15px;  
  width:440px;
  border-collapse:collapse;
  margin:0 auto 30px auto;
}

.drawer-pc td,.drawer-pc th{
  padding:10px;
  text-align:center;
}
.drawer-pc td:nth-child(1){
   color:#4178eb;
   font-weight:bold;
}
.drawer-pc td:nth-child(2){
   color:#4178eb;
   font-weight:bold;     
}

.drawer-pc td a{
   color:#4178eb;
   position:relative;
}

.drawer-pc td a:after{
   color:#4178eb;
position:absolute;    
display:inline-block;
content:" ";
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #4178eb;
top:3px;
right:-14px;
}

.drawer-pc td a:visited{
   color:#bbbbbb;
}

.drawer-pc td a:visited:after{
border-left: 5px solid #bbbbbb;
}

.drawer-pc th{
  color:#fff;
  background:#005ab3;
}
.drawer-pc table tr:nth-child(odd){
  background:#e6f2ff;
}
.drawer-pc tr{
  border-bottom:2px solid #80bcff;
}
.drawer-pc tr:nth-child(1){
  border-top:2px solid #80bcff;
}


/*============================
注釈とフッター
============================*/

.appendix-outer{
background-color: #C7DEF3;
width:100%;
z-index:40;
position:relative;
}

.appendix{
width:800px;
padding:0 200px;
margin:0 auto;   
}

.appendix-inner{
padding:30px;
font-size:15px;
line-height:1.7;
}

.last-area-outer{
background-color:#efefef;
width:100%;
z-index:40;
position:relative;
overflow:hidden;
}

.last-area{
width:800px;
padding:0 200px;
margin:0 auto;   
}

.last-area-right-text{  
text-align:right;
color:#666666;
font-size: 15px;
padding:30px 30px 20px;
  transition: all .6s;
}

.last-area-right-text:hover{ 
opacity:0.6;
}

.last-area-right-text2{  
text-align:right;
color:#666666;
font-size: 15px;
padding:0px 20px 50px 0;
}

/*============================
SNSボタンたち
============================*/

.sns-list{
    overflow: hidden;
    margin:40px auto 0 auto;
    text-align:center;
}

.sns-list li{
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-right: 60px;
}

.sns-list li a{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.sns-list li:last-child{
  margin-right: 0;
}

.sns-list li .icn-twi,
.sns-list li .icn-fb,
.sns-list li .icn-line{
  background-color: #bbbbbb;
    transition: all .6s;
}



.sns-list li .icn-twi:hover{
  background-color: #55acee;
}

.sns-list li .icn-fb:hover{
  background-color: #3b5998;
}

.sns-list li .icn-line:hover{
  background-color: #00c21b;
}

.sns-list li img{
  display: block;
  padding-top: 11.1px;
  max-height: 40px;
  height: auto;
  max-width: 40px;
  width: auto;
  margin: auto;
}

.sns-list li .icn-twi img{
  padding-top: 15.4px;
}



/*============================
ローディング画面
============================*/


/*-- がたつき防止 --*/

body {
    overflow-y: scroll;
    min-width:1200px;
}

/*-- ローディング画像 --*/

.spinner {
  width: 40px;
  height: 40px;
  background-color: #4178eb;

  margin:0 auto 20px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.loading{
    width:200px;
    height:100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -100px;
    text-align:center;
  }
  
.loading img{
      margin-top:-40px;
      text-align:center;
      margin:0 auto;
  }
      
.loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 10000;
 }
 
article{
  background:#fff;
}


/*-- table-sp調整 --*/

.table-sp-area{
display:none;
}



/*============================
オープニングトップ画面
============================*/

.opening{
    width:100%;
}

.header-banner-area{
    display:none;
}

.aozora{
width:100%;
}

.aozora-inner{
position:relative;
text-align:center;
overflow: hidden;
}


.aozora-title{
position:absolute;
top:50px;
margin:0 auto;
width:100%;
z-index:10;
}

.aozora-title img{
width:320px;
}

.aozora-scroll{
position:absolute;
bottom:120px;
width:100%;
margin:0 auto;
z-index: 10;
display:block;
}

.aozora-scroll-icon{
position:relative;
width:100%;
text-align:center;
}

.aozora-scroll-icon div{
    width:100%;
    text-align:center;
    color:#ffffff;
}

.aozora-scroll-icon div span:nth-child(1) {
  position: absolute;
  z-index:10;
  top: 0px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.aozora-scroll-icon div span:nth-child(2) {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 300px;
  height: 24px;
  margin-left: -150px;
  text-align:center;
  display:inline-block;
}

.aozora-zentai-subtitle{
    position: relative;
    z-index: 50;
    padding:50px 0 30px 0;
    width: 800px;
    margin: 0 auto;
    font-size: 40px;
    line-height: 1.75;
    font-family: 'Mplus 1p';
    transform: rotate(0.001deg);
    font-weight: 400;
    color: #4178eb;
    text-align:center;
}

.aozora-zentai-text{
position: relative;
z-index:50;
border-top:4px solid #4178eb;
padding-top:30px;
position:relative;
width:530px;
margin:0 auto;
font-size: 16px;
line-height: 1.75;
}















}/*  ---------    end of PC    ----------  */


/*  ---------    TABLET    ----------  */

@media (min-width: 576px) and (max-width: 1024px) {
    
    
}/*  ---------    end of TABLET    ----------  */






















/*  ---------  SP  ----------  */

@media (max-width: 575px) {

*{
font-family:sans-serif;
}
    
.nav-pc, .aside-pc,.drawer-pc{    
display:none;
}    


/*-- main contents --*/

.period{
width:100%;
padding:0;
margin:0 auto;
}

.number-area{
padding:0 10px;
}

.number-area div{
display:inline-block;
}

.number{
color:#C7DEF3;
font-size:140px;
font-family: sans-serif;
font-weight: 700;
letter-spacing: -5px;
position:relative
}

.number-before{
padding-right:10px;    
}

.number-before:after{
position:absolute;    
display:inline-block;
content:" ";
color:#C7DEF3;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #C7DEF3;
top:60px;
right:-6px;
}

.number-before + .number{
padding-left:5px;    
}

.title-area{
}

.year{
font-size:16px;
color:#4178eb;
font-family: 'Mplus 1p';
font-weight: 700;
margin-top:50px;
line-height:1.7;
padding:0 10px;
}

.title{
font-size:35px;
color:#4178eb;
font-family: 'Mplus 1p';
font-weight: 800;
letter-spacing:7px;
line-height:55px;
margin-top:100px;
padding:0 10px;
}

.text{
font-size:14px;
line-height:1.75;
padding:0 20px;
}



/*-- 位置の調整 --*/

/*-- ftont要素 --*/

.front{
position:relative;
height:750px;
}

.front-background{
position:absolute;
height:650px;
background-color:#C7DEF3;
transform: skewy(-15deg);
overflow: hidden;
}

.front-background .photo-area{
transform: skewy(15deg);
}



/* -front用数字修正- */

.front .number-area{
position:absolute;
right:0px;
top:50px;
}

.front .number{
color:#C7DEF3;
font-size:120px;
font-family: sans-serif;
font-weight: 700;
letter-spacing: -4.5px;
position:relative
}

.front .number-before{
padding-right:8px;    
}

.front .number-before:after{
position:absolute;    
display:inline-block;
content:" ";
color:#C7DEF3;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #C7DEF3;
top:55px;
right:-5px;
}

.front .number-before + .number{
padding-left:5px;    
}

.front .year{
margin-top:50px;
}

.front .number{
color:#ffffff;
}

.front .number:after{
border-left: 8px solid #ffffff;
}

.front .title-area{
position:absolute;
top:0;
left:0;
}

.front .title{
margin-top:50px;
}


.front .text{
float:right;
}

.front .text:before{
content: "";
    display: block;
    border-top: 4px solid #4178eb;
    margin: 10px 0 15px 0;
    width: 50px;
}


.front .photo-area{
position:absolute;
top:450px;
left:0;
background-color:transparent;
mix-blend-mode:multiply;
}

.front .photo-area img{
width:85%;
}




/* -- ここからtimes li -- */

.times li{
position:relative;
height:650px;
}

.li-background{
position:absolute;
bottom:0;
height:1px;
background-color:#C7DEF3;
transform: skewy(-15deg);
}

.times li{
z-index:10;
}

.times li .number-area{
z-index:17;    
}

.times li .year{
margin-top:-10px;
}

.times li .title-area{
z-index:20;    
margin-top:90px;
}

.times li .title-area .text{
  
}

.times li:nth-child(odd) .year{
text-align:right;
}



.times li .photo-area{
z-index:15;    
}


.times li:nth-child(odd) .number-area{
position:absolute;
right:0px;
}

.times li:nth-child(even) .number-area{
position:absolute;
left:0px;
}


.times li:nth-child(odd) .title-area{
position:absolute;
right:0px;   
}

.times li:nth-child(even) .title-area{
position:absolute;
left:0px;      
}

.times li .title + .text:before{
content:"";
display:block;
border-top:4px solid #4178eb;
margin:10px 0 15px 0;
width:50px;
}

.times li a{
}

.times li .link{
height:50px;
line-height:50px;
z-index:10;
margin-top:15px;
display:block;
padding:0 20px 0 20px;
}


.times li .arrow{
position: relative;
display: block;
margin-right: 10px;
width:30px;
height:30px;
background-color:#4178eb;
float:left;
transition: 0.3s ease-out;
}

.times li .arrow:before{
content: '';
width: 10px;
height: 10px;
border: 0px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 30%;
left: 6px;
transition: 0.2s ease-out;
}

.times li .arrow + .text{
font-size:14px;
line-height:30px;
font-weight:bold;
width:auto;
display: block;
}

.times li a .arrow + .text{
color:#333333;
transition: all .2s;
}

.times li .link:hover .arrow:before{
content: '';
width: 15px;
height: 15px;
border: 0px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 23%;
left: 1px;
}

.times li .link:hover .arrow + .text{
font-size:16px;
color:#4178eb;
}



.times li .photo-area{
width:80%;
height:300px;
}

.times li .photo-inner{
width:100%;
height:300px;
position:relative;
}

.times li .photo-frame img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
max-width: 90%;
max-height: 90%;
margin: auto;
border:2px solid #000000;
box-sizing:border-box;
box-shadow: 0 10px 15px rgba(0,0,0,0.4);
zoom:1;
opacity:0.7;/* -- 20180705追加 -- */
}

.times li .photo-area .photo-caption{
display:none;
}

.times li:nth-child(odd) .photo-area{
position:absolute;
top:0;
left:0px;
}

.times li:nth-child(even) .photo-area{
position:absolute;
top:0;
right:0px;
}

.rellax{
transform: translate3d(0, 0, 0);
transition: 500ms ease-out;
/*　will-change: animation, position;*/
}


/*============================
ナビゲーション・SP
============================*/

/*-- nav sp --*/

.nav-sp-area{
padding:10px;
}

.nav-sp-area li{
height:32px;
line-height:32px;
border-bottom:1px solid #bbbbbb;
padding:0 5px;
}

.nav-sp-area li.bound{
margin-top:20px;
}




.nav-sp-area li .nihongo{
font-size:16px;
}

.nav-sp-area .number{
color:#333333;
font-size:20px;
font-family: sans-serif;
font-weight: 700;
letter-spacing: -1px;
position:relative;
float:left;
}

.nav-sp-area .number-before{
padding-right:0;
padding-left:0;
}

.nav-sp-area .number-before:after{
position:absolute;    
display:inline-block;
content:" ";
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid #333333;
top:15px;
right:-6px;

}

.nav-sp-area .number-before + .number {
padding-left: 7px;
}

.nav-number-caption{
display:block;
padding-left:65px;
}

.nav-sp-area li a{
color:#333333;
display:block;
}

.nav-sp-area li a.active ,
.nav-sp-area li a.active .number{
color:#4178eb;
}

.nav-sp-area li a.active .number-before:after{
border-left: 3px solid #4178eb;    
}

/*============================
drowerメニュー　SP向け
============================*/

.drawer-title{
    display:none;
}


.drawer-open .drawer-hamburger:hover .drawer-title{
color:#ffffff;
}

.drawer-open .drawer-hamburger:hover .drawer-hamburger-icon{
background-color: transparent;
}
.drawer-open .drawer-hamburger:hover  .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger:hover  .drawer-hamburger-icon:before{
background-color:#ffffff;
}

.drawer-open .drawer-title{
color:#ffffff;    
}

.drawer-sp-inner{
}


/*!------------------------------------*\
    Base
\*!------------------------------------*/

.drawer-open {
  overflow: hidden!important
}

.drawer-nav {
  position: fixed;
  z-index: 102;
  top: 0;
  overflow: hidden;
  width: 260px;
  height: 100%;
  color: #222;
  background-color: #fff;
}

.drawer-menu {
  margin: 0;
  padding: 0;
  list-style: none
}

.drawer-menu-item {
  font-size: 1pc;
  font-size: 1rem;
  display: block;
  padding: 9pt;
  padding: .75rem;
  text-decoration: none;
  color: #222
}

.drawer-menu-item:hover {
  text-decoration: underline;
  color: #555;
  background-color: transparent
}

/*! overlay */

.drawer-overlay {
  position: fixed;
  z-index: -101;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  transition: opacity 1s;
}

.drawer-open .drawer-overlay {
  opacity:1;
  z-index: 101;
}


/*!------------------------------------*\
    Right
\*!------------------------------------*/

.drawer--right .drawer-nav {
  right: -500px;
  -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000)
}

.drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-nav, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0
}

.drawer--right.drawer-open .drawer-hamburger {
  right: 260px;
}


/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

.drawer-hamburger {
  position: fixed; 
  top: 0;
  right:20px;
  display: block;
  box-sizing: content-box;
  width: 2pc;
  width: 2rem;
  padding: 0;
  padding-right: 9pt;
  padding-left: 9pt;
  padding: 18px .75rem 30px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  border: 0;
  outline: 0;
  background-color: transparent;
  z-index:300;
  overflow: hidden;
}

.drawer-hamburger:hover {
  cursor: pointer;
  background-color: transparent;

}

.drawer-hamburger-icon {
  position: relative;
  display: block;
  margin-top: 10px
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  width: 100%;
  height: 2px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #222
}

.drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  position: absolute;
  top: -10px;
  left: 0;
  content: ' '
}

.drawer-hamburger-icon:after {
  top: 10px
}

.drawer-open .drawer-hamburger-icon {
  background-color: transparent; 
}

.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
  top: 0;
  background-color:#ffffff;
}

.drawer-open .drawer-hamburger-icon:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}






/*============================
テーブルレイアウト
============================*/

.table-accordion{
display:none;
}

.table-sp-area{
padding:10px;
}

.table-sp-area .table-title{
display:block;
margin:10px 0px 0 0px;
padding:8px;
line-height:24px;
font-size:16px;
color:#ffffff;
background-color:#4178eb;
text-align:center;
z-index:20;
position:relative;
}

.table-sp-area .table-triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 15px 10px 0 10px;
border-color: #4178eb transparent transparent transparent;
margin:5px auto 0 auto;
text-align:center;
}



.table-sp-area .table-title2{
border-bottom:1px solid #ffffff;
height:30px;
}

.table-sp-area .table-caption{
margin:10px 0px 10px 10px;
text-align:right;
font-size:12px;
}

.table-sp-area table{
font-size:14px;  
border-collapse:collapse;
margin:0 auto 30px auto;
width:100%;
}

.table-sp-area td{
  padding:10px;
  text-align:center;
}
.table-sp-area td:nth-child(1){
   color:#4178eb;
   font-weight:bold;
}
.table-sp-area td:nth-child(2){
   color:#4178eb;
   font-weight:bold; 

}

.table-sp-area td a{
   color:#4178eb;
   position:relative;
}

.table-sp-area td a:after{
   color:#4178eb;
position:absolute;    
display:inline-block;
content:" ";
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #4178eb;
top:4px;
right:-14px;
}

.table-sp-area td a:visited{
   color:#bbbbbb;
}

.table-sp-area td a:visited:after{
border-left: 4px solid #bbbbbb;
}


.table-sp-area table tr:nth-child(odd){
  background:#e6f2ff;
}
.table-sp-area tr{
  border-bottom:2px solid #80bcff;
}
.table-sp-area tr:nth-child(1){
  border-top:2px solid #80bcff;
}

.drawer-sp .table-title2{
    border-bottom:1px solid #ffffff;
    height:30px;
}




/*============================
注釈とフッター
============================*/

.appendix-outer{
background-color: #C7DEF3;
width:100%;
z-index:40;
position:relative;
margin-top:40px;
}

.appendix{
width:100%;
padding:0;
margin:0 auto;   
}

.appendix-inner{
padding:20px;
font-size:13px;
line-height:1.7;
}

.last-area-outer{
background-color:#efefef;
width:100%;
z-index:40;
position:relative;
overflow:hidden;
}

.last-area{
width:100%;
padding:0;
margin:0 auto;   
}

.last-area-right-text{  
text-align:right;
color:#666666;
font-size: 10px;
padding:10px 20px 10px 20px;
  transition: all .6s;
}

.last-area-right-text img{  
width:50%;
text-align:right;
}

.last-area-right-text:hover{ 
opacity:0.6;
}

.last-area-right-text2{  
text-align:right;
color:#666666;
font-size: 10px;
padding:0px 20px 20px 20px;
}

/*============================
SNSボタンたち
============================*/

.sns-list{
    overflow: hidden;
    margin:20px auto 0 auto;
    text-align:center;
}

.sns-list li{
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 30px;
}

.sns-list li a{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.sns-list li:last-child{
  margin-right: 0;
}

.sns-list li .icn-twi,
.sns-list li .icn-fb,
.sns-list li .icn-line{
  background-color: #bbbbbb;
    transition: all .6s;
}



.sns-list li .icn-twi:hover{
  background-color: #55acee;
}

.sns-list li .icn-fb:hover{
  background-color: #3b5998;
}

.sns-list li .icn-line:hover{
  background-color: #00c21b;
}

.sns-list li img{
  display: block;
  padding-top: 5.55px;
  max-height: 20px;
  height: auto;
  max-width: 20px;
  width: auto;
  margin: auto;
}

.sns-list li .icn-twi img{
  padding-top: 7.7px;
}




/*============================
ローディング画面
============================*/


/*-- がたつき防止 --*/
/*
body {
    overflow-y: scroll;
}
*/
/*-- ローディング画像 --*/

.spinner {
  width: 40px;
  height: 40px;
  background-color: #4178eb;

  margin:0 auto 20px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.loading{
    width:200px;
    height:100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -100px;
    text-align:center;
  }
  
.loading img{
      margin-top:-40px;
      text-align:center;
      margin:0 auto;
  }
      
.loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 10000;
 }
 
article{
  background:#fff;
}


.footer-areafix{
    overflow: hidden;
}

/*============================
オープニングトップ画面
============================*/

.opening{
    width:100%;
}

.header-banner-area{
    display:none;
}

.aozora{
width:100%;
margin-bottom:-50px;
}

.aozora-inner{
position:relative;
text-align:center;
overflow: hidden;
}


.aozora-title{
position:absolute;
top:50px;
margin:0 auto;
width:100%;
z-index:10;
}

.aozora-title img{
width:260px;
}

.aozora-scroll{
position:absolute;
bottom:90px;
width:100%;
margin:0 auto;
z-index: 10;
display:block;
}

.aozora-scroll-icon{
position:relative;
width:100%;
text-align:center;
}

.aozora-scroll-icon div{
    width:100%;
    text-align:center;
    color:#ffffff;
}

.aozora-scroll-icon div span:nth-child(1) {
  position: absolute;
  z-index:10;
  top: 0px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}

@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.aozora-scroll-icon div span:nth-child(2) {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 300px;
  height: 24px;
  margin-left: -150px;
  text-align:center;
  display:inline-block;
}

.aozora-zentai-subtitle{
    position: relative;
    z-index: 50;
    padding:50px 0 30px 0;
    width: 280px;
    margin: 0 auto;
    font-size: 28px;
    line-height: 1.75;
    font-family: 'Mplus 1p';
    font-weight: 400;
    color: #4178eb;
}

.aozora-zentai-text{
position: relative;
z-index:50;
border-top:4px solid #4178eb;
padding-top:30px;
position:relative;
width:280px;
margin:0 auto;
font-size: 14px;
line-height: 1.75;
}



    
}/*  ---------    end of SP    ----------  */