@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@v400;500&display=swap');
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none; outline:none!important;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
html,body,div,article,section,nav,header,footer,input,textarea {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
div,article,section{display:block; overflow:hidden;}
strong{font-weight: bold;}
ol,ul {list-style: none;margin:0;padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;margin:0;padding:0;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}

html{
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: -webkit-fill-available;
  font-size: 80%;
}
@media screen and (min-width: 900px){
  html{
    font-size: 62.5%;
  }
}
html,body{
  position:relative;
  height:100%;
  min-height:100%;
}
body{
  color: #351401;
  background: #fff url(bg.jpg) left top repeat;
  font-size: 1.5rem;
  font-family: 'Kiwi Maru', serif;
  font-weight: 400;
  font-style: normal;
  line-height: 2.5rem;
  position: relative;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
a{color:#493422; text-decoration:none;}
@media screen and (min-width: 900px){
  a:hover{
    opacity: .8;
    transition: .2s;
  }
}

header{
  text-align: center;
  padding: 5rem 0 3rem;
}
h1{
  color: #d63b84;
  font-size: 3rem;
  font-weight: 500;
  line-height: 3.5rem;
}
h1 small{
  font-size: 1.5rem;
  display: block;
}

main{
  display:flex;
  flex-direction: column;
  grid-gap: 3rem;
  flex-wrap: wrap;
  width: 90vw;
  max-width: 100rem;
  margin: 0 auto;
}
@media screen and (min-width: 900px){
  main{
    flex-direction: row;
  }
}
.box{
  background: #fff;
  padding: 2rem;
  border-radius: 2rem;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 900px){
  .box{
    width: calc(50% - 2rem);
  }
}
.box h2{
  font-size: 2rem;
  margin-bottom: 2rem;
}
@media screen and (min-width: 900px){
  .box h2 br,
  .box a br{
    display: none;
  }
}
.box h2 img{
  display: block;
  margin: 0 auto 1rem;
}
.box p{
  text-align: left;
  min-height: 8rem;
}
.box a{
  color: #fff;
  display: inline-block;
  border-radius: 4rem;
  padding: .8rem 5rem .8rem 2rem;
  text-align: center;
  margin: 1rem auto 0;
  position: relative;
}
.box a::after{
  content: "";
  display: block;
  width: 3rem;
  height: 1.4rem;
  background: url(ico-exlink.svg) top right no-repeat;
  background-size: contain;
  position: absolute;
  right: 1.5rem;
  top: calc(50% - .6rem);
}

.hashima h2{color: #d63b84;}
.hashima a{background: #d63b84;}

.keibo h2{color: #209140;}
.keibo a{background: #209140;}

.mamas h2{color: #e97100;}
.mamas a{background: #e97100;}

.hohoemi h2{color: #72a408;}
.hohoemi a{background: #72a408;}

#copy{
  color: #d63b84;
  font-size: 1.2rem;
  text-align: center;
  opacity:.5;
  margin-top: 5rem;
}