@charset "utf-8";
/* CSS Document */

html,body{
    width: 100%;
}
body{
	color:#000000;
	background:#ffffff;
	letter-spacing:0.05em;
	background-image: url(/p/abi/img/back_white.png),url(/p/abi/img/pattern_red.png);
	background-position: center top, center top;
	background-repeat: repeat-y,repeat;
}
body a{
	color:#000000;
}

/*文字色*/
.red{
	color:#970000;
}
.white{
	color:#FFF;
}

/*リンク設定*/
a:hover,
a img:hover,
.sbtn:hover{
	position:relative;
	top: 1px;
	left: 1px;
	opacity:0.7;
	cursor:pointer;
}


/*マージン設定*/
.margin_bottom10{
	margin-bottom:10px;
}
.margin_bottom20{
	margin-bottom:20px;
}
.margin_bottom30{
	margin-bottom:30px;
}
.margin_bottom40{
	margin-bottom:40px;
}

.margin_top10{
	margin-top:10px;
}
.margin_top20{
	margin-top:20px;
}
.margin_top30{
	margin-top:30px;
}
.margin_top40{
	margin-top:40px;
}

.font_size13{
	font-size:1.3em;
}

/*ヘッダー設定*/
.wi_940{
	margin:0 auto;
	width:940px;
	height:auto;
}

h1{
	margin:25px auto 0;
}

.yellow_cont{
	margin:0 auto;
	padding:15px 20px;
	width:722px;
	height:auto;
	background:#ffffd3;
	border:2px solid #ffc483;
}

.attention_title{
	display:block;
	margin:15px auto 5px;
	font-size:1.2em;
	text-decoration:underline;
}

#attention_cont ul li{
    margin: 5px 0 0 20px;
    list-style: disc;
	text-align:left;
}

#guide_line a{
	display:block;
	margin:15px auto 10px;
	text-decoration:underline;
	font-size:1.2em;
}

#guide_line a img{
	vertical-align: middle;
	padding-right:20px;
}

#profile_cont{
	margin:0 auto 30px;
	padding:10px 0 30px;
	width:910px;
	height:auto;
    background: #ffffff;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

#profile_cont img{
	display:block;
	margin:20px auto;
}

#special_link a{
    display: block;
    margin: 12px auto 30px;
    padding: 15px 0;
    width: 660px;
    height: auto;
    background: #ffff98;
    border: 2px solid #ff9e9e;
    border-radius: 30px;
    color: #dc0000;
    font-size: 1.2em;
    font-weight: bold;
}

a.anchor{
    display: block;
    padding-top: 1px;
    margin-top: -1px;
}

#anime{
	display:block;
	margin:10px auto 0;
}

h2{
	margin:10px auto 15px;
	padding:12px 0;
	width:760px;
	height:auto;
	background:#ceecff;
	border-top:1px solid #000000;
	font-size:1.25em;
}

h3{
	margin:20px auto 15px;
	padding:9px 0 5px;
	width:940px;
	height:auto;
	background:#f3e9da;
	border-top:3px dotted #ab9a8a;
	font-size:1.1em;
}

h4{
	margin:20px auto 0;
	padding:9px 0 7px;
	width:940px;
	height:auto;
	background:#ffffc4;
	border-top:1px solid #ab9a8a;
	font-size:1.1em;
}

.font_s{
	font-size:0.9em;
}

.img_box{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

#vali1{
	width:700px;
}

.img_box li{
	width:16%;
	height:auto;
	font-size:0.8em;
	line-height:1.6em;
}

#vali1 li{
	width:20%;
}

.img_box li img{
	display:block;
	margin:20px auto 10px;
	width: auto;
	height:120px;
}

.img_box li.yoko img{
	margin-top:43px;
	width: 100%;
	height: auto;
}

#vali1 li.big img{
	width: auto;
	height:150px;
}

#vali1 li.vali img{
	margin-top:30px;
}

#line li{
	width:14%;
}

#line li img{
	width: auto;
	height:95px;
}

#sdgs1 li img{
	margin-top:5px;
	width: auto;
	height:130px;
}

#sdgs2 li{
	width:10%;
}

#sdgs2 li img{
	height:140px;
}

h5{
	margin:10px auto 20px;
	padding:10px 0;
	width:940px;
	height:auto;
	font-size:1.1em;
	border-bottom:1px solid #000000;
	border-top:1px solid #000000;
}

a.zip_btn{
	display:block;
	margin:12px auto;
	padding:7px 0;
	width:500px;
	height:auto;
	background:#ffce5e;
	border-radius: 22px;
}

a.zip_btn.ai{
	background:#8bd1ff;
    margin-bottom: 50px;
}

#special{
	margin-top:70px;
	width:930px;
}

#special_title{
	display:block;
	margin:-64px auto 10px;
}

#in_white{
	background:#ffffff;
}

.contents_title{
	clear:both;
	margin:20px auto 20px;
	padding:10px 0;
	background:#ffefa4;
	font-size:1.3em;
}

.pattern{
	margin:15px 30px 0px 0;
	width:120px;
	height:auto;
}

.wall_cont{
	overflow:hidden;
	clear:both;
	margin:0 auto;
	width:96%;
	height: auto;
    text-align: left;
}

img.wall{
	float:left;
	margin-bottom:20px;
	padding-right:20px;
	width:360px;
	height:auto;
}

.wall_cont a{
	display:block;
	float:left;
	margin:8px auto;
	margin-right:10px;
	padding:7px 20px;
	width: 120px;
	height:auto;
	background:#ffce5e;
	border-radius: 22px;
	text-align: center;
}

.wall_link{
	float:left;
	width: 510px;
}

.pc{
	clear:both;
	display:block;
	font-size:1.1em;
}

ul#memo{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:10px auto 0;
	padding-bottom:20px;
	width:100%;
	height:auto;
}

ul#memo li{
	padding:10px 1%;
	width:22%;
}

ul#memo li img{
	margin-top:10px;
	width:90%;
	height:auto;
    border: 1px solid #ccc;
}



#menseki{
	margin:50px auto 0;
	padding:17px 60px;
	width:760px;
	height:auto;
	background:#efefef;
}

#menseki_title{
	font-size:1.1em;
}

#menseki ul li{
    margin: 5px 0 0 20px;
    list-style: disc;
	text-align:left;
	font-size:0.95em;
}

h6{
	margin:50px auto 10px;
	padding:20px 0 0;
	width:880px;
	height:auto;
	font-size:1.5em;
	border-top:1px solid #000000;
}

.banner{
	display:block;
	margin:20px 0;
}

.p_link{
	text-decoration:underline;
}

#line2_bn{
	display:block;
	margin:5px auto 25px;
}

img.qr_btn{
	padding:10px 0 0;
}

#koushin{
	margin:0 auto 30px;
	padding:10px;
	width:80%;
	border:3px solid #eeeeee;
}

#koushin a{
	color: #09F;
}

/*フッター*/
footer{
	clear:both;
	margin:70px auto 0;
	padding:20px 0 40px;
	background:#fff0ea;
	text-align:center;
	border-top:2px solid #dc0000;
}

footer a{
	text-decoration:underline;
}

/*トップへ戻るボタン*/
.page-top{
	margin: 0 ;
	padding: 0 ;
}
.page-top p{
	z-index:3;
	margin: 0 ;
	padding: 0 ;
	position: fixed ;
	right: 16px ;
	bottom: 16px ;
} 
.move-page-top {
    display: block;
    background: #dc0000;
    width: 80px;
    height: 80px;
    border-radius: 40px 40px 40px 40px;
    color: #fff;
    line-height: 80px;
    text-decoration: none;
    text-align: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* PC向けおよび大型タブレット向けのレイアウトの指定：769px～960px */
@media only screen and (min-width: 769px) {

#sp_nav,
#sp_footer,
.sp_only{
    display:none !important;
}
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
スマートフォン向けレイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

@media screen and (max-width: 769px) {

body{
}

.sp_only{
	display:block;
}

.sp_none,
#logo_cont,
#ex_text{
	display:none;
}

img{
	width:100%;
	height:auto;
}

.br_none br{
	display:none;
}

article{
	margin:0 auto;
	width:90%;
	height:auto;
}

h1 {
    margin: 6px auto;
}

h2,
h3,
h4,
h5,
h6{
	width:100%;
	height:auto;
}

.wi_940,
#vali1,
a.zip_btn,
#special,
.wall_cont,
img.wall,
.wall_cont a,
.wall_link,
ul#memo,
ul#memo li,
#menseki,
.sp_90{
	width:90%;
	height:auto;
}

.sp_90{
	margin:0 auto;
}

.yellow_cont,
#profile_cont{
	padding:15px 5%;
	width:80%;
}

#attention_cont{
	width:85%;
}

#attention_cont.yellow_cont{
    padding: 15px 5%;
    width: 90%;
}

#guide_line a {
    margin: 20px auto 20px;
}

#profile_cont{
	padding-top:2px;
}

#profile_cont div.yellow_cont{
	width:90%;
}	
	
#menseki {
    margin: 30px auto 0;
    padding: 17px 5%;
}

.tree{
	width:15%;
	height:auto;
}

.tree.small{
	width:7%;
	height:auto;
}

footer img{
	width:inherit;
	height:auto;
}

#line li img,
.img_box li img {
    width: 100%;
    height: auto !important;
}

#sdgs1.img_box li#all{
    width: 70%;
}
	
#sdgs1 li#all img{
	width:40%;
	height:auto !important;
}

#guide_line a {
    font-size: 1.0em;
}

#guide_line a img {
    padding-right: 5px;
}

#vali1 li.big img,
#vali1 li img,
.img_box li img{
    width: auto;
	height:100px !important;
}

#vali1 li.vali img {
    margin-top: 10px;
}

.img_box li img {
    margin: 10px auto 10px;
}

#vali1 li,
.img_box li{
    width: 32%;
}

.img_box li.yoko img {
    margin-top: 35px;
	height:auto !important;
}

#line li {
	margin: 0 2%;
    width: 21%;
}

#sdgs2 li {
    width: 16%;
    margin: 0 2%;
}

a.zip_btn {
	padding:7px 5%;
	width:90%;
}

#special_title {
    margin: -47px auto 10px;
}

.pattern {
    margin: 10px 2% 0;
    width: 33%;
}

#special {
    margin-top: 75px;
}

.contents_title {
    margin: 20px auto 10px;
}

.wall_cont img{
	width:100%;
}

img.wall {
    float: none;
    margin-bottom: 0;
    padding-right: 0;
}

.wall_cont a {
    margin: 5px auto;
    padding: 7px 10%;
}

.wall_cont{
    margin: 15px auto;
}

.wall_cont.sp {
    margin-top: 15px;
    padding-top: 25px;
    border-top: 1px dotted #6d3514;
}

ul#memo li img {
    display: block;
    margin: 0 auto;
    width: 61%;
}

.news_img{
	width:30%;
	height:auto;
}

.sp{
	margin-bottom:25px;
}

footer {
	margin: 50px auto 0;
    padding: 20px 5% 40px;
}

#copy,
#copy a{
	font-size:0.95em;
	line-height:1.7em;
}

#special_link a {
    padding: 10px 5%;
    width: 85%;
    font-size: 1.1em;
    border-radius: 20px;
    font-weight: normal;
}

#anime{
	width:30%;
}

#line2_bn{
	margin:5px auto 10px;
}

}

@media print{
#sp_nav,
footer h5,
#sp_foot_list,
#sp_footer_insta,
.sp_only{
	display: none;
}

}

