@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');

body{
 font-family:"Noto Sans JP","Arial","ヒラギノ丸ゴ ProN","メイリオ",sans-serif;
}
.mt30{
 margin-top: 30px;
}
.mt80{
 margin-top: 80px;
}
/*-------------------------
header
-------------------------*/
header{
 position: sticky;
 top: 0;
}
.header-inner{
 display: flex;
 justify-content: space-between;
 background-color: #fff;
 box-shadow: 0 3px 10px #808080;
 color:#098693;
 padding: 10px 20px;
 position: sticky;
 top: 0;
}
.logo-box{
 display: flex;
 align-items: center;
}
.logo-box p{
 padding-left: 15px;
}
.header-right{
 display: flex;
 align-items: center;
}
.search{
 display: flex;
 border: solid 2px #4b4b4b;
 border-radius: 15px;
 padding: 7px 10px;
 margin-right: 20px;
}
.top-btn{
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 text-align: center;
 align-items: center;
}
.top-btn >.on-color{
 background-color: #fef5e6;
}
.top-btn >li{
 background-color: #fff;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all  0.3s ease;
 margin: 0 10px;
 padding: 7px 13px;
 border: solid 2px #098693;
 border-radius: 17px;
 width: 130px;
}
.top-btn >li:hover{
 background-color: #fef5e6;
}
.top-btn >li >a{
 display: block;
 width: 100%;
}
.notes a{
 position: relative;
 padding-right: 20px;
}
.notes a:after{
 content: "";
 display: inline-block;
 width: 14px;
 height: 14px;
 background-image: url(../images/icon-blank.png);
 background-size: contain;
 background-repeat:no-repeat;
 padding-right: 21px;
 position: absolute;
 top: 7px;
 right: -5px;
}
.top-btn-tablet,
.top-img-smt{
 display: none;
}
/*-------------------------
main
-------------------------*/
#index-main{
 background-color: #f5f5f5;
 padding-bottom: 50px;
}
h1{
 background-color: #098693;
 color: #fff;
 font-size: 2em;
 padding: 40px 30%;
}
.main-form,
.confi{
 display: grid;
 width: 40%;
 margin: 0 auto;
 padding: 40px 0;
}
.input-area{
 padding: 5px 7px;
 margin: 7px 0 20px;
}
input.btn01,
.send-btn >a{
 background-color: #098693;
 padding: 10px;
 color: #ffffff;
 border-radius: 5px;
}
input.btn02{
 border: solid 1px #111111;
 padding: 10px;
 border-radius: 5px;
 background-color: #ffffff;
}
.notes a{
 text-decoration: underline;
 color: #098693;
}
/*--- #index-main ---*/
#index-main .btn01{
 margin: 30px auto 0;
}
#index-main .input-area{
 background-color: #ffffff;
 outline: none;
 height: 35px;
}
#index-main textarea.input-area{
 height: 150px;
}
#index-main .text01{
 color: #4d4d4d;
 margin: 5px 0 0 3px;
}

/*--- #confirm-main ---*/
#confirm-main .confi{
 display: block;
}
#confirm-main .confi span{
 background: linear-gradient(transparent 60%, #ffff00 60%);
 padding-bottom: 2px;
}
#confirm-main .input-area{
 background-color: unset;
}
#confirm-main .btn-area{
 display: flex;
 justify-content: space-between;
 width: 170px;
 margin: 30px auto 0;
 text-align: center;
}

/*--- #send-main ---*/
#send-main .text-area{
 width: 40%;
 margin: 0 auto;
 padding: 40px 0;
}
#send-main .send-btn{
 display: flex;
}
#send-main .send-btn >a{
 margin: 30px auto 0;
}

/*-------------------------
footer
-------------------------*/
.footer{
}
.note{
 background-color: #f7869e;
 color: #fff;
 text-align: center;
 padding: 15px 5%;
 font-size: 1.15em;
 line-height: 1.5em;
}
.note a{
 border-bottom: solid 1px #fff;
}
.footer-wrapper{
 background-color: #dcdcdc;
 padding: 20px 5%;
 text-align: center;
}
.footer-box{
 display: flex;
 justify-content: center;
}
ul.footer-text{
 display: flex;
}
ul.footer-text li{
 display: flex;
 align-items: center;
 padding: 0 15px;
 border-right: solid 1px #111;
 height: 25px;
}
ul.footer-text li:last-child{
 border-right: 0;
}
.copyright{
 padding-top: 20px;
}

@media screen and (max-width: 1024px) {
	/* 1024px以下に適用されるCSS（タブレット用） */
 .header-inner{
  box-shadow: none;
 }
 .top-btn-tablet{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  background-color: #f7869e;
  color: #ffffff;
 }
 .top-btn-tablet >li:not(:last-child){
  border-right: 1px solid #ffffff;
 }
 .top-btn-tablet >li >a{
  padding: 5px 13px;
  display: block;
  width: 100%;
 }
 h1{
  padding: 20px 5%;
  text-align: center;
 }
 .top-btn,
 .none{
  display: none;
 }
}

@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
 img{
  width: 100%;
 }
 .header-inner{
  padding: 10px 3%;
 }
 .logo-box{
  width: 35%;
 }
 .logo-box> img{
  max-width: 85%;
 }
 .header-right{
  justify-content: flex-end;
  width: 50%;
 }
 .search{
  margin-right: 0;
 }
 .search-img{
  max-width: 18px;
  height: auto;
 }
 .main-form,
 .confi{
  width: 85%;
 }
 .footer-wrapper{
 padding: 20px 3%;
 }
 .none{
  display: none;
 }
 #send-main .text-area{
  width: 85%;
 }
}