@charset "utf-8";

* { margin: 0px; }  /* div間の隙間をなくす */

body {
	text-align:center;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: 400;
	color:#333333;
	background: #E9F6F8;
	letter-spacing: 2.1px;
    cursor: default;
    caret-color: transparent;
}

h2 { font-size: 42px; }
h3 { font-size: 35px; }
p, li { font-size: 28px; }

h2.circle {
    position: relative;
	text-align: left;
    display: block;
    padding: 0.2em 0 0.2em 2.8em;
	color: #0075B5;
}

h2.circle::before {
    position: absolute;
    top: 0.6em;
    left: 56px;
    display: block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #EBB0C1;
    content: "";
}

#div-body {
	width: 700px;
	margin: auto;
}


.image_full {
    width: 100%;
    display:block;
}

.div_image_fukidasi {
    padding-top: 28px;
    padding-left: 168px;
    padding-right: 168px;
}

.div_image_middle {
    padding-top: 56px;
    padding-left: 56px;
    padding-right: 56px;
}
.div_image_middle2 {
    padding-left: 56px;
    padding-right: 56px;
}

.div_description {
	text-align: left;
	display: inline-block;
	padding: 56px;
	line-height: 56px;
}

.div_white {
    background: #fff;
}
.div_white_start {
    background: #fff;
    padding-top: 112px;
}
.div_white_end {
    background: #fff;
    padding-bottom: 168px;
}

.div_button {
    margin-left: 56px;
    margin-right: 56px;
}

#image_footer {
    width: 100%;
    display:block;
    background: #F3F3F3;
}

#contact_title {
    padding-top: 112px;
    padding-bottom: 56px;
}


.div_sns {
    height: 168px;
    line-height: 168px;
    text-align:center;
}

.icon_fb {
	display:inline-block;
	vertical-align: middle;
	padding-right: 56px;
	width: 56px;
	height: 56px;
}
.icon_fb_menu {
	display:inline-block;
	vertical-align: middle;
	padding-right: 15px;
	width: 30px;
	height: 30px;
}
.icon_twitter {
	display:inline-block;
	vertical-align: middle;
	padding-right: 56px;
	width: 46.7px;
	height: 37.3px;
}
.icon_twitter_menu {
	display:inline-block;
	vertical-align: middle;
	padding-right: 15px;
	width: 25px;
	height: 20px;
}
.icon_instagram {
	display:inline-block;
	vertical-align: middle;
	width: 56px;
	height: 56px;
}
.icon_instagram_menu {
	display:inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
}
#privacypolicy {
	font-weight: bold;
	text-decoration: none;
	color:#333333;
	font-size: 12px;
}
#copyright {
	color:gray;
	font-size: 12px;
}

/****　寄付ページボタン　****/
.button_donation {
    width: 80%;
    margin: 21px auto;
    padding: 14px;    /* 文字とボタン間の距離 */
    display: block;
    text-align: center;
    border-radius: 49px;    /* ボタンの角丸 */
    background: #6DC1CC;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    font-size: 28px;
}


/****　折りたたみdiv　****/
/****　番号付けをして複製していくしかない　****/
#div_report {
    background: #fff;
	width: 100%;
    height: 224px;
	overflow: hidden;    /* はみ出る部分を見せない */
}
#div_button_open {
    width: 100%;
    height: 91px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));    /* 薄暗く */
}
#button_open {
    width: 30%;
    margin: 21px auto;
    font-size: 21px;
    color: #fff;
    padding: 14px;    /* 文字とボタン間の距離 */
    display: block;
    text-align: center;
    border-radius: 49px;    /* ボタンの角丸 */
    background: #6DC1CC;
    cursor: pointer;
}
/****　クリック時の処理　****/
#check_button_open:checked ~ #div_report {
    height: auto !important;
}
#check_button_open:checked ~ #div_button_open {
    display: none !important;
}
#check_button_open:checked ~ #div_button_open #button_open {
    display: none !important;
}

/****　2　****/
#div_report2 {
    background: #fff;
	width: 100%;
    height: 224px;
	overflow: hidden;    /* はみ出る部分を見せない */
}
#div_button_open2 {
    width: 100%;
    height: 91px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));    /* 薄暗く */
}
#button_open2 {
    width: 30%;
    margin: 21px auto;
    font-size: 21px;
    color: #fff;
    padding: 14px;    /* 文字とボタン間の距離 */
    display: block;
    text-align: center;
    border-radius: 49px;    /* ボタンの角丸 */
    background: #6DC1CC;
    cursor: pointer;
}
/****　クリック時の処理　****/
#check_button_open2:checked ~ #div_report2 {
    height: auto !important;
}
#check_button_open2:checked ~ #div_button_open2 {
    display: none !important;
}
#check_button_open2:checked ~ #div_button_open2 #button_open2 {
    display: none !important;
}



/****　メニューボタン　****/
#menu_btn {
	position: absolute;
    top: 21px;
	bottom: auto;
	right:  21px;
	z-index: 1000;
    pointer-events: auto;
}
#menu_btn_smart {
	position: fixed;
    top: auto;
	bottom: 3vw;
	right:  3vw;
	z-index: 1000;
	display: none;
}
.panel_btn {
  display: inline-block;
  position: relative;
  width: 56px;
  height: 56px;
  background: #00d4c0;
  border: 3.5px solid;
  border-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}
.panel_btn_smart {
  display: inline-block;
  position: relative;
  width: 8vw;
  height: 8vw;
  background: #00d4c0;
  border: 0.5vw solid;
  border-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}
.panel_btn:hover, .panel_btn_smart:hover { background: #00d4c0; }
.panel_btn .close, .panel_btn_smart .close { background: transparent; }
.panel_btn .close:before, .panel_btn .close:after, .panel_btn_smart .close:before, .panel_btn_smart .close:after { margin-top: 0; }
.panel_btn .close:before, .panel_btn_smart .close:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.panel_btn .close:after, .panel_btn_smart .close:after {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.panel_btn_icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 3.5px;
  margin: -2.8px 0 0 -17.5px;
  background: #fff;
  transition: .2s;
}
.panel_btn_icon:before, .panel_btn_icon:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 35px;
  height: 3.5px;
  background: #fff;
  transition: .3s;
}
.panel_btn_icon:before { margin-top: -10.5px; }
.panel_btn_icon:after { margin-top: 7px; }
.panel_btn_icon_smart {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5vw;
  height: 0.5vw;
  margin: -0.4vw 0 0 -2.5vw;
  background: #fff;
  transition: .2s;
}
.panel_btn_icon_smart:before, .panel_btn_icon_smart:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5vw;
  height: 0.5vw;
  background: #fff;
  transition: .3s;
}
.panel_btn_icon_smart:before { margin-top: -1.5vw; }
.panel_btn_icon_smart:after { margin-top: 1vw; }
/****　メニュー　****/
/****　追加の場合は div_menu#height と同じ数字を全て +40、menu_body_smart#height を +40　****/
/****　文字数が多くてメニュー幅を広げたい時は、menu_body#width と同じ数字、menu_body_smart#width を全て変更　****/
/*  上のスペース　28（2vw） */
/* カテゴリ　84（18vw） */
/* メニュー　546（104vw） */
/*  SNS　56（10vw） */
#div_menu {
	position: fixed;
	width: 700px;
	height: 543px;
	top: 0;
	z-index: 1001;
    pointer-events: none;
}
#menu_body {
	width: 245px;
	height: 543px;
	border-bottom-left-radius: 28px 28px;
	background: #00d4c0;
	position: absolute;
	top: -653px;
	right: 0;
	z-index: 999;
	transition: .1s;
	display: block;
    pointer-events: auto;
    padding-top: 21px;  /* 上のスペース */
}
#menu_body_smart {
	width: min(50vw, 240px);
	height: min(120vw, 550px);
	border-top-left-radius: min(4vw, 16px) min(4vw, 16px);
	border-bottom-left-radius: min(4vw, 16px) min(4vw, 16px);
	background: #00d4c0;
	position: fixed;
	right: max(-70vw, -245px);
	bottom: 7px;
	z-index: 999;
	transition: .1s;
	display: none;
    padding-top: min(2.5vw, 10px);  /* 上のスペース */
}
.open_menu {
  -webkit-transform: translate3d(0, 653px, 0);
  transform: translate3d(0, 653px, 0);
}
.open_menu_smart {
  -webkit-transform: translate3d(max(-70vw, -245px), 0, 0);
  transform: translate3d(max(-70vw, -245px), 0, 0);
}
.menu_category {
	text-align: left;
	color: #001513;
	font-size: min(3.5vw, 14px);
	font-weight: bold;
	line-height: min(6vw, 28px);
	text-decoration: none;
	margin: 0 auto 0 min(4vw, 17.5px);
}
.div_menu_content_home {
	position: relative;
	margin: 0 0 0 min(15vw, 63px);
	text-align: left;
	font-size: min(6.5vw, 28px);
	font-weight: bold;
	letter-spacing: 0;
	line-height: min(10vw, 56px);
}
.div_menu_content {
	position: relative;
	margin: 0 0 0 min(8.5vw, 42px);
	text-align: left;
	font-size: min(4.5vw, 21px);
	font-weight: bold;
	letter-spacing: 0;
	line-height: min(8vw, 35px);
}
.a_menu, .menu_home {
	color: #fff;
	text-decoration: none;
}
.a_menu_color {
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}
.menu_gray {
	color: gray;
	text-decoration: none;
}
.menu_home::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: min(9vw, 35px);
    height: min(8.5vw, 28px);
    top: min(1.5vw, 14px);
    left: max(-11vw, -45.5px);
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.a_menu::before, .a_menu_color::before, .menu_gray::before {
    content: "";
    position: absolute;
    top: 40%;
    left: max(-4vw, -21px);
    transform: translateY(-50%);
    /* 矢印の描画 */
    width: min(1vw, 7px);
    height: min(1vw, 7px);
    border-top: min(0.5vw, 2.1px) solid #fff;
    border-right: min(0.5vw, 2.1px) solid #fff;
    transform: rotate(45deg);
}
.div_menu_sns {
	height: 56px;
	line-height: 56px;
	text-align: center;
}
.div_menu_sns_smart {
	height: min(12vw, 49px);
	line-height: min(12vw, 49px);
	text-align: center;
	padding-right: min(12vw, 100px);
}
.icon_fb_menu {
	display: inline-block;
	vertical-align: middle;
	padding-right: min(2vw, 21px);
	width: min(7vw, 35px);
	height: min(7vw, 35px);
}
.icon_twitter_menu {
	display: inline-block;
	vertical-align: middle;
	padding-right: min(2vw, 21px);
	width: min(7vw, 24.5px);
	height: min(6vw, 21px);
}
.icon_instagram_menu {
	display: inline-block;
	vertical-align: middle;
	width: min(7vw, 28px);
	height: min(7vw, 28px);
}
/* ホバー時に半透明に */
.a_menu, .a_menu_color, .icon_fb_menu, .icon_twitter_menu, .icon_instagram_menu {
  	transition-property: opacity;
  	-webkit-transition-property: opacity;
  	transition-duration: .5s;
  	-webkit-transition-duration: .5s;
}
.a_menu:hover, .a_menu_color:hover, .icon_fb_menu:hover, .icon_twitter_menu:hover, .icon_instagram_menu:hover {
    opacity: .5;
}


/*****  スマホの場合  *****/
@media screen and (max-width:700px) {
	/*  画面幅  */
	#div-body { width: 100%; }
	/*  フォントサイズ  */
	body { letter-spacing: 0.3vw; }
	h2 { font-size: 6vw; }
	h3 { font-size: 5vw; }
	p, li { font-size: 4vw; }
	.button_donation { font-size: 4vw; }
	#button_open { font-size: 3vw; }
	/*  行間隔  */
	.div_description { line-height: 8vw; }
	.div_sns {
		height: 24vw;
		line-height: 24vw;
	}
	/*  padding / margin  */
	h2.circle::before { left: 8vw; }
	.div_description { padding: 8vw; }
	.div_white_start { padding-top: 16vw; }
	.div_white_end { padding-bottom: 24vw; }
	.div_button {
    	margin-left: 8vw;
    	margin-right: 8vw;
	}
	.div_image_fukidasi {
    	padding-top: 4vw;
    	padding-left: 24vw;
    	padding-right: 24vw;
	}
	.div_image_description {
    	padding-top: 8vw;
    	padding-left: 4vw;
    	padding-right: 4vw;
	}
	.div_image_middle {
    	padding-top: 8vw;
    	padding-left: 8vw;
    	padding-right: 8vw;
	}
	.div_image_middle2 {
    	padding-left: 8vw;
    	padding-right: 8vw;
	}
	#contact_title {
    	padding-top: 16vw;
    	padding-bottom: 8vw;
	}
    .button_donation, #button_open {
        margin: 3vw auto;
        padding: 2vw;    /* 文字とボタン間の距離 */
        border-radius: 7vw;    /* ボタンの角丸 */
    }
	/*  height  */
    #div_report { height: 32vw; }
    #div_button_open { height: 13px; }
	/*  アイコン  */
	.icon_fb {
		padding-right: 8vw;
		width: 8vw;
		height: 8vw;
	}
	.icon_twitter {
		padding-right: 8vw;
		width: 6.7vw;
		height: 5.3vw;
	}
	.icon_instagram {
		width: 8vw;
		height: 8vw;
	}
	/*  メニュー  */
	#div_menu, #menu_btn, #menu_body { display: none; }
	#menu_btn_smart, #menu_body_smart { display: block; }
	.a_menu_color { text-shadow: 0.2vw 0.2vw 0 #fff, -0.2vw 0.2vw 0 #fff, 0.2vw -0.2vw 0 #fff, -0.2vw -0.2vw 0 #fff; }
}