@charset "UTF-8";
/* #wrapper{
    width: 1000px;
    margin: 0 auto;
} */
.flex{
    display: flex;
}
.template-apply{
    width: 760px;
    margin: 30px auto;
    text-align: center;
    border-radius: 5px;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.template-apply.red:hover{
    border: 2px solid #da1a1a;
    background-color: #fff;
}
.template-apply.red:hover a{
    color: #da1a1a;
}
.template-apply a{
    font-size: 35px;
    padding: 17px 0;
    letter-spacing: 2px;
    color: #fff;
    display: block;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
}
.template-apply a .fa{
    margin-left: 2vw; /*icon余白*/
}
.template-apply.red,.template-apply.red .soon-circle{
    background:#da1a1a;
    color: #da1a1a;
}
.template-apply.soon{
    position: relative;
}
.template-apply.close{
    background-color:#b7abab;
}
.template-apply.soon .soon-circle{
    width: 100px;
    height: 100px;
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: -11px;
    right: 30px;
    border-radius: 50%;
    background-color: #fff;
}

nav .nav-inner{
    display: flex;
    padding: 0 20px;
    width: 940px;
    margin: 20px auto;
}
nav .nav-inner div{
    flex: 1;
    margin-right: 50px;
    background: ;
}
nav .nav-inner div:last-child{
    margin-right: 0;
}
nav .nav-inner div a{
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*タブ*/
.template-tab {
  width: 960px;
  margin: 0 auto;
}
.template-tab .tab-content {
  margin: 0 20px;
}
.template-tab label {
  display: inline-block;
  padding: 20px 15px;
  color: #fdf9f9;
  font-weight: bold;
  font-size: 25px;
  letter-spacing: 1px;
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
}
.template-tab.two label{
    width: 455px;
}
.template-tab.three label{
  width: 303px;
}
.template-tab.four label{
    width: 225px;
}
.template-tab.five label{
    width: 150px;
}
.template-tab.six label{
    width: 130px;
}
label#label-1 {background-color: #d6d3d4;}
label#label-2 {background-color: #d6d3d4;}
label#label-3 {background-color: #d6d3d4;}
label#label-4 {background-color: #d6d3d4;}
label#label-5 {background-color: #d6d3d4;}
label#label-6 {background-color: #d6d3d4;}

.template-tab input:checked + label{
  color: white;
  padding: 25px 10px 20px 10px;
}
input:checked + label#label-1 {background: #009688;}
input:checked + label#label-2 {background: #008a79;}
input:checked + label#label-3 {background: #008a79;}
input:checked + label#label-4 {background: #008a79;}
input:checked + label#label-5 {background: #008a79;}
input:checked + label#label-6 {background: #008a79;}

.template-tab input {
  display: none;
}
.template-tab #tab-b1,.template-tab #tab-b2,.template-tab #tab-b3,.template-tab #tab-b4,.template-tab #tab-b5,.template-tab #tab-b6{
  display: none;
  padding: 20px;
}
.template-tab #tab-1:checked ~ #tab-b1,
.template-tab #tab-2:checked ~ #tab-b2,
.template-tab #tab-3:checked ~ #tab-b3,
.template-tab #tab-4:checked ~ #tab-b4,
.template-tab #tab-5:checked ~ #tab-b5,
.template-tab #tab-6:checked ~ #tab-b6{
  display: block;
}


/*アコーディオン*/

/*ボックス全体*/
.template-accordion {
    width: 900px;
    margin: 30px auto;
    padding: 0;
}
/*ラベル*/
.template-accordion label {
    display: block;
    margin: 3px 0;
    padding : 13px 12px;
    color: ;
    font-weight: bold;
    background: ;
    cursor :pointer;
    position: relative;
}
/*アイコンを表示*/
.template-accordion label:after {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    padding-right: 8px;
    position: absolute;
    top: 25%;
    right: 20px;
}
/*ラベルホバー時*/
.template-accordion label:hover {
    background :;
}
/*チェックは隠す*/
.template-accordion input {
    display: none;
}
/*中身を非表示にしておく*/
.template-accordion .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
/*クリックで中身表示*/
.template-accordion .cssacc:checked + label + .accshow {
    height: auto;
    padding: 10px;
    background: ;
    opacity: 1;
}
.template-accordion .accshow p {
    margin: 15px 10px;
}
/*アイコンを入れ替える*/
.template-accordion .cssacc:checked + label:after {
   transform:rotate(90deg);
}


/*SNS*/
.template-share{
  margin: 20px auto;
  width: 960px;
}
.template-share .fa-line{
  color: #3acd01;
}
.template-share .fa-twitter-square{
  color: #55acee;
}
.template-share .fa-facebook-square{
  color: #3b5998;
}
.template-share .fa-envelope-square{
  color: #1d8282;
}
.template-share > p{
  text-align: center;
  padding: 2%;
  margin: 2% 0;
}
.template-share ul li{
    margin-right: 15px;
}
.template-share ul li:last-child{
    margin-right: 0;
}
.template-share ul li a{
  color: #000;
}
.template-share ul.flex{
  justify-content: flex-end;
}



/*固定フッター*/
footer.template-footer{
    width: 100%;
    background: #f5f5f5;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #f5f5f5;
    padding: 10px 0;
    text-align: center;
    box-sizing: border-box;
}
footer.template-footer .fixed-wrapper{
    width: 1000px;
    margin: 0 auto;
}
footer.template-footer .fixed-wrapper.columns{
    display: flex;
}
footer.template-footer .fixed-wrapper.columns div{
    flex: 4;
    margin-right: 20px;
}
footer.template-footer .fixed-wrapper div img{
    width: 100%;
}
footer.template-footer .fixed-wrapper.columns div:last-child{
    flex: 1;
    margin-right: 0;
    background: #bbbbbb;
}
footer.template-footer .fixed-wrapper.columns div:last-child a{
    color: #fff;
    display: block;
    padding: 10px 0;
    text-decoration: none;
}