@charset "utf-8";
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

body{
color:#555;
font:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
-webkit-text-size-adjust:100%;
background-image:url(https://dokkyofubonokai.jp/2021/images/background.png);
background-position:center top;
background-attachment: fixed;
background-repeat: no repeat;
background-size: cover;
padding:0;
margin:0;
}

/* リンク設定
------------------------------------------------------------*/
a{color:#358de0;text-decoration:none;}
a:hover{color:#429bef;}
a:active, a:focus{outline:0;}

/*リンクボタン*/

/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}


.btn--enter,
a.btn--enter {
  color: #fff;
  background-color: #eba3a8;
}
.btn--enter:hover,
a.btn--enter:hover {
  color: #fff;
  background: #f58189;
}

a.btn--radius {
   border-radius: 100vh;
}

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  200%;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #dde67b;  /* 背景色指定 */
    border:solid 1px #aac753;
    font-weight:bold;
    padding:  10px;
    padding-left:20px;
    padding-right:20px;             /* 余白指定 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    border-radius:  1px;        /* 角丸指定 */
}

.head_test:before {
    content:  '';               /* 空白の要素を作る */
    background-color: #b3b3b3;  /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left: 50%;                  /* 位置調整 */
    height: 60%;                /* 高さ指定 */
    top: 26%;                   /* 位置調整 */
    z-index:  -1;               /* 重なり調整 */
    width: 46%;                 /* 幅指定 */
    box-shadow: 0 0 8px 8px #b3b3b3;/* 影指定 */
    transform: rotate(3deg);    /* 回転 */
}

a.btn--yellow.btn--border-dotted {
  border: 3px solid #000;
  background-color:yellow;
  font-size:100%;
  padding:1rem;
  padding-right:2rem;
  border-radius:0;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}


/* 文字サイズ */

.f80{font-size:80%;}

/* 全体
------------------------------------------------------------*/
#wrap{width:100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;}

footer{
width:100%;
background-color: #eba3a8;
color:#fff;
text-align:center;
margin-top:auto;
}


.contents{
    max-width:800px;
    margin-left: auto;
    margin-right: auto;
    height:auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 700px;
}

.head{width:100%;
      text-align:left;
      padding-left:50px;}

ul{list-style: none;
   margin-top:50px;}

.float_wrap{
  display: block;
}
.float_wrap li{
  float:left;}
.float_wrap li:nth-child(3n+1){
  clear: left;
}

/* タブレットサイズに合わせた設定 */
@media screen and (max-width: 1200px) {

.contents{
    max-width:100%;
    height:auto;}

.box {
    max-width:100%;
    padding:10px;
}
p{font-size:150%;}
h2{font-size:200%;}
f80{font-size:120%;}

/* スマートフォンサイズに合わせた設定 */
@media screen and (max-width: 600px) {

.contents{
    max-width:100%;
    height:auto;}

.box {
    max-width:100%;
    padding:10px;
}
p{font-size:150%;}
h2{font-size:200%;}
f80{font-size:120%;}

}