/* 
Theme Name: Asian
Description：Asian Design Symposium
Author: Sh-Ta
Version: 2023
*/
/* ---------------------------------------------------------
     css
-----------------------------------------------------------*/
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:bold}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,

input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox}[type="radio"]{-webkit-appearance:radio;appearance:radio}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:bold}

/* ---------------------------------------------------------


-----------------------------------------------------------*/

html{
/* font-size: 62.5%; */
min-height:100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-color: #c6d4dd;
}
body{
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
font-size: 1rem;
-webkit-text-size-adjust:100%;
}
/* --------------------------
     parts
----------------------------*/
p{
font-size:clamp(0.875rem, 0.83rem + 0.23vw, 1rem)
}

.sp_br{
display: block;
}
@media print, screen and (min-width: 769px){
.sp_br{
display: none;
}
}


.pc_br{
display: none;
}
@media print, screen and (min-width: 769px){
.pc_br{
display: block;
}
}

/* --------------------------
     layout
----------------------------*/

main{
margin-top: 50px;
}
@media print, screen and (min-width: 769px){
main{
margin-top: 0;
}
}

/* ページ全体を囲ってみたけど、いらないかな */
#page-wrap,
#index-wrap,
#about-wrap{

}

/* singleは、別クラス作って設定しないの？ */
.gl-nav-container,
.index-container-hero,
.index-container,
.main-container,
.footer-container{
max-width: 1240px;
margin: 0 auto;
position: relative;
}
/* ---------------------------------------------------------
     header  navigation
-----------------------------------------------------------*/
header{
width: 100%;
background-color: #fff;
}
/* ---------------------------------------------------------
     ハンバーガー  SP
-----------------------------------------------------------*/
.hamburger_sp{
display: block;
position:fixed;
z-index: 400;
cursor: pointer;
width: 38px;
height:38px;
top: 10px;
right: 10px;
background-color:#fff;
}
@media print, screen and (min-width: 769px){
.hamburger_sp{
display: none;
}
}
.hamburger_sp.active span {
z-index: 400;
}
.hamburger_sp span{
display: inline-block;
transition: all .1s;
position: absolute; z-index: 1000;
left: 8px;
top:0;
height: 2px;
border-radius: 2px;
background: #bc352e;
width: 55%;
}
.hamburger_sp span:nth-of-type(1) {
top:10px;
}
.hamburger_sp span:nth-of-type(2) {
top:18px;
}
.hamburger_sp span:nth-of-type(3) {
top:26px;
}
/*activeクラスが付与されると ×に*/
.hamburger_sp.active span:nth-of-type(1) {
top: 12px;
left: 8px;
transform: translateY(6px) rotate(-45deg);
width: 50%;
}
.hamburger_sp.active span:nth-of-type(2) {
opacity: 0;
}
.hamburger_sp.active span:nth-of-type(3){
top: 24px;
left: 8px;
transform: translateY(-6px) rotate(45deg);
width: 50%;
}
.hamburger_sp em{
display:none;
border: none;
}
.hamburger_sp.active em{
display: inline-block;
margin-top: 28px;
margin-left: 0;
color: #000;
font-weight: 400;
background: none;
font-style: normal;
}

/* ---------------------------------------------------------
     SP   グローバルナビゲーション     panelactiveというクラスがオン
-----------------------------------------------------------*/
.global-nav-box{
position:fixed;
z-index: -1;
opacity: 0;
top:0;
left: 0;
background:#fff;
overflow:auto;
overflow-x:auto;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.panelactive{
opacity: 1;
z-index:300;
padding-top: 60px;
background-color: #fff;
border-bottom: 2px solid  #bc352e;
}
.panelactive{
width:100%;
height: auto;
}
.panelactive .global-nav li{
border-bottom: 1px solid #bc352e;
}
.panelactive .global-nav li a{
display: block;
text-decoration: none;
padding:15px;
transition:all .3s;
font-size: 0.875rem;
}
.panelactive .global-nav li a:hover{
color:#666;
background-color: #37599e;
color: #fff;
}
.global-nav li.has-child ul,
.global-nav li.has-child ul ul{
position: relative;
left:0;
top:0;
width:100%;
visibility:visible;
opacity:1;
display: none;
transition:none;
z-index: 4;
}
.global-nav li.has-child:hover > ul,
.global-nav li.has-child ul li:hover > ul,
.global-nav li.has-child:active > ul,
.global-nav li.has-child ul li:active > ul {
visibility: visible;
opacity: 1;
}
/*  */
.add-nav{
font-size: 0.875rem;
}
/* sp  問い合わせボタン */
.contact-nav{
display: block;
color: #666;
margin: 20px auto;
}
.contact-nav li{
text-align: center;
width: 40%;
margin: 0 auto;
}
.contact-nav li a{
border: 1px solid #646466;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1),rgba(170, 170, 170, 1) );
display: block;
border-radius: 8px;
padding: 10px 20px; 
color: #000;
font-size: .75rem;
}
.contact-nav li a:hover{
background-image: linear-gradient(180deg, rgba(255, 255, 255, .8),rgba(170, 170, 170, .8) );
}
.lang-nav > ul{
display: flex;
width: 50%;
margin: 10px auto;
}
.lang-nav > ul li{
width: 50%;
text-align: center;
}
.lang-nav > ul li:first-child{
border-right: 1px solid #ddd;
}
.lang-nav > ul li a{
display: block;
color: #4063a4;
padding: 5px;
transition:all .3s;
}
/* ---------------------------------------------------------
     PC ナビゲーション
-----------------------------------------------------------*/
@media screen and (min-width: 769px),print {

/* global navigation */
.global-nav-box{
display: flex;
justify-content: space-between;
padding: 15px 0 5px;
position: relative;
opacity: 1;
z-index: 10;
}
.global-nav{
display: flex;
width: min(60%, 700px);
}
.global-nav li{
border-left: 2px solid #646466;
width: 24%;
text-align: center;
overflow-wrap: break-word;
}
.global-nav li:last-child{
border-right: 2px solid #646466;
}
.global-nav li a{
display: block;
padding: 12px 0;
font-size: 0.875rem;
}
.global-nav li a:hover{
color: #4063a4;
}
/* お問い合わせボタン English日本語切り替え */
.add-nav{
display: flex;
font-size: 0.875rem;
}
/*  */
.contact-nav{
text-align: center;
margin: 0;
padding: 2px 0;
}
.contact-nav li{
margin-right: 10px;
text-align: center;
width: auto;
}
.contact-nav li a{
border: 1px solid #646466;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1),rgba(170, 170, 170, 1) );
display: block;
border-radius: 8px;
padding: 10px 20px; 
color: #000;
}
@media print, screen and (min-width: 880px){
.contact-nav li{
margin-right: 40px;
text-align: center;
width: auto;
}
}
.lang-nav > ul{
width: 140px;
margin: 0;
}
.lang-nav > ul li{
border-left: 2px solid #646466;
text-align: center;
}
.lang-nav > ul li:last-child{
border-right: 2px solid #646466;
}
.lang-nav > ul li a{
display: block;
padding: 12px 0;
color: #000;
}
.lang-nav > ul li a:hover{
color: #4063a4;
}
}
/* ---------------------------------------------------------
     index top
-----------------------------------------------------------*/
.hero-box{
width: 100%;
margin: 0 auto 50px;
position: relative;
padding-bottom: 5%;
}
@media print, screen and (min-width: 769px){
.hero-box{
margin: 0 auto;
position: relative;
}
}
.hero{
position: relative;
width: 100%;
background: url("./img/index_hero.png") no-repeat 50% 8%;
background-size: 100%;
overflow: hidden;
margin: auto;
line-height: 0;
}
.hero:before{
 content:"";
display: block;
padding-top: 100.92%;
}
.indexH1-box{
margin-top: -42%;
height: 80px;
}
@media print, screen and (min-width: 510px){
.indexH1-box{
margin-top: -44%;
height: 100px;
}
}
@media print, screen and (min-width: 680px){
.indexH1-box{
margin-top: -45%;
height: 140px;
}
}
@media print, screen and (min-width: 769px){
.hero{
background-position: 50% -30px;
background-size: 90%;
}
.indexH1-box{
margin-top: -62%;
height: 120px;
}
}
@media print, screen and (min-width: 797px){
.hero{
background-position: 50% -30px;
background-size: 85%;
}
.indexH1-box{
margin-top: -65%;
height: 160px;
}
}
@media print, screen and (min-width: 925px){
.hero{
background-position: 50% -30px;
background-size: 80%;
}
.indexH1-box{
margin-top: -67%;
height: 220px;
}
}
.indexH1{
font-size: 3.710vw; 
font-size:clamp(1rem, 0.261rem + 3.7vw, 3.125rem);
font-family: "Century Gothic",sans-serif;
text-align: center;
}

/* Search */
.searchform{
position: relative;
}
.search-box {
display: block; 
position: absolute;
z-index: 1;
top: 10px;
right:10px;
}
/* 検索窓の大きさを指定*/
.searchfield{
width: 140px;
height:1.875rem;
background-color: #fff;
border:2px solid #b9baba;
border-radius: 20px;
font-size: .875rem;
text-align: center;
font-weight: 400 ;
/* margin-top: 60px; */margin-top: 0;
}
@media print, screen and (min-width: 769px){
.searchfield{
width: 180px;
/* margin-top: 0; */
}
}
/* デフォルトラインを消す */
input{
border: none;
outline: none;
}
/* ボックスシャドウで、入力時背景色を消す */
input:-webkit-autofill{
box-shadow: 0 0 0 1000px white inset;
background-color: rgba(255,255,255,1);
}
/* 虫メガネの位置をポジションアブソリュートで指定
高さを持たせるためにインラインブロック要素にする*/
.searchsubmit{
display: inline-block;
position: absolute;
top: 6px;
right: 3px;
width: 20px;
height: 20px;
background: url(./img/searchwindow.png) no-repeat 0 0/ auto 100%; /* 背景にアイコン画像を配置 */
}

::placeholder {
text-align: center;
color: #b9baba;
}
/* ロゴ */
.logo{
position: absolute;
z-index: 1;
top: -40px;
left: 0px;
width: 25%;
}
@media print, screen and (min-width: 600px){
.logo{
width: 20%;
}
}
@media print, screen and (min-width: 769px){
.logo{
top: 10px;
width: 15%;
}
}
.logo-img{
display: block;
width: 100%;
}
/* --------------------------
     NEWSお知らせ
----------------------------*/
.index-news-box{
width: 60%;
margin: 0 auto 0;
}
@media screen and (min-width: 769px),print {
/* .index-news-box{
width: 80%;
}*/
}
.news-box-h2{
text-align: center;
font-size:clamp(0.938rem, 0.785rem + 0.76vw, 1.375rem);
padding-bottom: 15px;
}
.index-news-list{
display: flex;
flex-direction: column;
}
.news-list-item{
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.news-list-item a{
display: block;
}
.news-list-item a:hover .news-list-thumb img {
transition: transform .4s;
transform: scale(1.1);
}
.news-list-thumb{
overflow: hidden;
margin-bottom: .625rem;
}
.news-list-thumb img{
width: 100%;
transition: transform .4s;
position: relative;
aspect-ratio: 5/3;
object-fit: cover;
/*
画像全部入れたい場合  containに変更
*/
}








@media print, screen and (min-width: 769px){
.news-list-thumb img{
  max-height: 180px;
}
}
.news-list-date{
text-align: center;
font-size: .8125rem;
}
.news-list-title{
line-height: 1.4;
font-size: .8125rem;
margin-top: 10px;
overflow-wrap: break-word;
 display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media screen and (min-width: 769px),print {
.index-news-list{
flex-direction: row;
justify-content: space-between;
}
.news-list-item{
width: calc((100% - 40px) / 3);
}
}
/* --------------------------
     animation  NEWS
----------------------------*/
.fadeIn_01 {
  opacity: 0;
  transform: translate(0,30px);
  transition-duration: 1.5s;
}
.fadeIn_02 {
  opacity: 0;
  transform: translate(0,60px);
  transition-duration:1.5s;
}
.fadeIn_03 {
  opacity: 0;
  transform: translate(0,90px);
  transition-duration: 1.5s;
}
.fade_end {
  opacity: 1;
  transform: translate(0, 0);
}
/* Asian Design Symposium を　animation */
.anima-title{
  animation: anima-title 2s ease-out forwards;
  opacity: 1;
}
@keyframes anima-title{
  0% {transform: scale(1.0);opacity: 0;}
  80% {transform: scale(1.0);opacity: 1;}
  90% {transform: scale(0.95);opacity: 1;}
  100% {transform: scale(1.0); opacity: 1;}
}


/* ---------------------------------------------------------
     footer
-----------------------------------------------------------*/
footer{
width: 100%;
background-color: #426297;
}
.footer-nav-box{
display: flex;
flex-direction: column;
padding: 10px;
color: #fff;
}
.footer-nav{
order:1;
font-size: .875rem;
width: 100%;
}
.footer-nav ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.footer-nav ul li{
width: calc((100% - 20px) / 2);
padding: 8px 0 8px 10px;
}
.footer-nav li a{
display:block;
padding: 5px 0 5px 10px;
}
.footer-copy{
margin: 10px auto;
order:3;
font-size: .625rem;
}
.footer-logo{
width: min(60%, 250px);
margin: 20px auto;
order:2;
}
.footer-logo img{
width: 100%;
}
/* --------------------------
     footer  PC
----------------------------*/
@media print, screen and (min-width: 769px){
.footer-nav-box{                  align-items: center;
flex-direction: row;
justify-content: space-between;
}
.footer-nav{
display: flex;
width: min(60%, 550px);
flex-direction: column;
}
.footer-nav ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.footer-nav ul li{height: 20px; padding: 0;
width: auto;
-webkit-transform: skewX(160deg);
-moz-transform: skewX(160deg);
transform: skewX(160deg);
border-right: 1px solid #fff;
}
.footer-nav ul li:last-child{
border: none;
}
.footer-nav li a{ 
padding:4px 8px 4px 10px;
transform: skewX(-160deg);
font-size: .75rem;
}
/* copyright */
.footer-copy{
text-align: right;
margin: 10px 10px 10px auto;
order:2;
font-size: .75rem;
width: 20%;
}
/* logo */
.footer-logo{
width: 20%;
margin: 0;
order:3;
}
.footer-logo img{
width: 100%;
}
}

/* ---------------------------------------------------------
     main-container
-----------------------------------------------------------*/
.main-container{
 background-image: url("./img/back_diamond.png"),url("./img/back_circle.png");
  background-repeat: no-repeat,no-repeat;
  background-attachment: scroll, scroll;
  background-position:right -20% top 50px,bottom 5% left -25%;
  background-size:280px, 250px;
}
.subpage-wrapper{
padding:100px 5% 10%;
}
@media print, screen and (min-width: 769px){
.main-container{
  background-position:right 20% top -5% , bottom 5% left 15%;
}
.subpage-wrapper{
padding:8% 20% 5% 20%;
}
}
.main-container h2{
border-left: 2px solid #646466;
border-bottom: 2px solid #646466;
padding-left: 10px;
padding-bottom: 2px;
font-size: 1.25rem;
margin-bottom: 6%;
}

/* --------------------------
     about  アジアデザイン会議とは 
----------------------------*/
.prof-box{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.profTxt{
font-size: 1rem;
text-align: center;
line-height: 1.4;
order: 2;
}
.profPhoto{
order: 1;
}
.profPhoto img{
width: 30%;
margin: 0 auto;
display: block;
padding-bottom: 20px;
}

@media print, screen and (min-width: 769px){
.prof-box{
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.profTxt{
order: 1;
width: 65%;
text-align: right;
padding-right: 10px;
}
.profPhoto{
width: 35%;
order: 2;
}
.profPhoto img{
width: 100%;
margin-right: 0;
}
}

p.smallTitle{
font-size: 1rem;
line-height: 1.8;
font-weight: 700;
}
h3{
font-weight: 700;
font-size: 1.25rem;
line-height: 1.8;
}
P.aboutTxt{
font-size: 1rem;
line-height: 1.8;
overflow-wrap: break-word;
}

/* --------------------------
      member University 加盟大学
----------------------------*/
.memberTxt{
line-height: 1.8;
font-size: 1rem;
font-weight: 700;
}
.memberImg{

max-width: 180px; 
text-align: center;
margin: 20px auto;
}
@media print, screen and (min-width: 990px){
.memberImg{
float: right;
margin-top: -40px;
max-width: 280px; 
text-align: right;
}
}
.memberImg img{
width: 100%;
}

/* --------------------------
     archive アーカイブ
----------------------------*/
.archive-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 15%;
}
.archive-thum{
width: min(60%, 200px);
margin: 0 auto;
}
.archive-outline{
width: 100%;
}
@media print, screen and (min-width: 769px){
.archive-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

}
.archive-thum{
width: 25%;
margin: 0;
}
.archive-outline{
width: 69%;
/* padding-left: 5%; */
}
}
/* サムネイル */
.archive-thum figcaption{
font-size: 1.75rem;
margin: 0 auto;
}
.archive-thum figcaption span{
font-size: 1rem;
}
.archive-thum figure{
margin: 0 auto;
}
.archive-thum figure img{
width: 100%;
aspect-ratio: 160/227;
object-fit: contain;
}
.archive-thum p img{
margin: 10px auto;
width: 130px;
}
.archiveDownload{
display: block;
}
.archiveDownload:hover{
opacity :.8;
}
@media print, screen and (min-width: 769px){
.archive-thum p img{
margin: 2px auto;
width: min(70%, 140px);
}
}
/* outline　目次 */
.outlineUl li{
  font-size: .875rem;
  line-height: 1.125;
}
.outlineUl li.lineB{
font-weight: 700;
}
.outlineUl li.lineC{
 padding-left: .875rem;
}
.outlineUl a{
  display: inline-block;
  margin-top: 4px;
}
.outlineUl .name {
position: relative;
width: 83%;
z-index: 1;
}
.outlineUl .time {
position: relative;
z-index: 1;
  text-align: right;
  width: 17%;  
}
.outlineUl li:after {
  content: '';
  display: block;
  height: 0;
  border-top: 1px dotted;
  position: relative;
  bottom: 0.5em;
  left: 0;
  right: 0;
  z-index: 0;
}
.name span {
  background: #c6d4dd;
  padding-right: 10px;
}
.time span {
  background: #c6d4dd;
  margin:-5px;
}


/* --------------------------
     archive アーカイブ
----------------------------*/
.news-list li a{
display: block;
margin-bottom: 15%;
}
.news-list li a:hover{
opacity: .8;
}
.news-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;

}
.news-thum{
width: 50%;
margin: 0 auto;
}
.news-thum img{
width: 100%;
transition: transform .4s;
position: relative;
aspect-ratio: 5/3;
object-fit: cover;
}
.news-body{
width: 100%;
}
.news-body time{

}
.news-body h3{
font-size: 1rem;
line-height: 1.2;
margin-bottom: 5px;
}
.news-body p{
font-size: .875rem;
line-height: 1.4;
 display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

@media print, screen and (min-width: 769px){
.news-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.news-thum{
width: 35%;
margin: 0;
}
.news-body{
width: 65%;
padding-left: 5%;
}
}


/* --------------------------
     個別ページ
----------------------------*/
.single-news figure{
text-align: center;
padding: 0 5% 5% 5%;
}
.single-news figure img{
width: 100%;

}
.single-news-body time{
display: inline-block;
font-size: 1.125rem;
padding-bottom: 5px;
}
.single-news-body p{
line-height: 1.4;
margin-bottom: 2%;
}
.single-news-body a{
text-decoration: underline;
color: #426297;
}
/* --------------------------
     お問い合わせ
----------------------------*/
.contact-box{
width: 100%;
margin: 30px auto;
padding: 10% 15%;
background-color: #fff;
}

.contact-box .contactH2,
.contact-box .contactH3{
text-align: center;
border: none;
font-size: 1.25rem;
font-weight: bold;
margin-top: 20px;
}
/*  */
/* fieldset を無視する */
.contact-field fieldset{
display: contents;
}
.sizeL{
width: 100%;
min-height: 120px;
line-height: 1.4;
padding: 5px;
border: 1px solid #646466;
font-size: .8125rem;
}
.sizeM{
width: 100%;
padding: 5px;
font-size: .8125rem;
}
.contact-field{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 3%;position: relative;
}
.contact-field legend{
width: 100%;
padding: 10px;
border: 1px solid #646466;
border-bottom: none;
font-size: .875rem;
display: flex;
  align-items: center;
}

.contact-field div{
width:100%;
line-height: 1.4;
padding: 10px;
border: 1px solid #646466
}
.contactP{
font-size: .8125rem;
text-align: center;
margin-bottom: 3%;
line-height: 1.4;
}
.contact_P{
font-size: 1.125rem;
}
@media print, screen and (min-width: 769px){
.contact-field{
width: 100%;
display: flex;
flex-direction: row;
}
.contact-field legend{
width: 35%;
border-bottom:  1px solid #646466;
}
.contact-field div{
width: 65%;
}
}
.blueBtn{
display: block;
margin: 6px auto;
padding: 10px 20px;
text-align: center;
font-size: 1.125rem;
background-color: #ee1c25;
color: #fff;
border-radius: 20px;
}
.blueBtn:hover{
opacity: .8;

}
/* ---------------------------------------------------------
     footer 貼り付き用
-----------------------------------------------------------*/
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.headMain-wrap{
  flex: 1;
}
header {
  width: 100%;
}
footer {
  width: 100%;
}