@charset "utf-8";

/* ===================================================================
format
=================================================================== */

/*	body
----------------------------------------------------*/
body {
text-align:center;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif , "FontAwesome";
}

img {width: 100%; height: auto}

/*	a:link,a:visited,a:hover,a:active
----------------------------------------------------*/
a			{color:#0068b7;text-decoration:none;}
a:link		{color:#0068b7;text-decoration:none;}
a:visited	{color:#0068b7;}
a:hover		{text-decoration:underline;}
a:active	{color:#0068b7;}

/* ===================================================================
Layout
=================================================================== */


/* ===================================================================
Layout-contents
=================================================================== */

/*	header
----------------------------------------------------*/
header {
border-bottom: 1px solid #8f8f8f;
}

header p {
width: 243px;
margin: 0 auto;
text-align: center;
}


.border_bg {
background: url(../images/border_bg.gif) repeat;
}

/*	mainImg
----------------------------------------------------*/
#mainImg01,
#mainImg02 {
background: url(../images/mainImg_bg.png) repeat;
}


/*	sec01
----------------------------------------------------*/
#sec01 {
background-image: url(../images/sec01_bg.png);
background-size: cover; 
}


/*	sec02
----------------------------------------------------*/
#sec02 {
background: #fff5ff;
}


/*	sec03
----------------------------------------------------*/
#sec03 {
background: #dfffff;
}


/*	sec04
----------------------------------------------------*/
#sec04 {
background-image: url(../images/sec04_bg.png);
background-size: cover; 
}


/*	sec05
----------------------------------------------------*/
#sec05 {
}


/*	sec06
----------------------------------------------------*/
#sec06 {
background: #fff5ff;
}

#sec06 .box {
background: #fff;
}

#sec06 #effect {
background: #fde6f0;
}

#sec06 #effect #list h3 {
margin-bottom: 10px;
}

#sec06 #effect #list li {
display: inline-block;
margin: 0 0 10px 0;
padding: 4px 20px 1px;
color: #df2d79;
text-align: center;
font-weight: bold;
font-size: 14px;
border: 1px solid #df2d79;
border-radius: 3px; 
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

#sec06 #effect #list h3 img.sub01 {max-width: 328px;}
#sec06 #effect #list h3 img.sub02 {max-width: 312px;}
#sec06 #effect #list h3 img.sub03 {max-width: 359px;}
#sec06 #effect #list h3 img.sub04 {max-width: 328px;}
#sec06 #effect #list h3 img.sub05 {max-width: 265px;}
#sec06 #effect #list h3 img.sub06 {max-width: 437px;}


/*	sec07
----------------------------------------------------*/
#sec07 .box .text {
border: 1px solid #df2d79;
background: #fff;
}

#sec07 .box .text p {
text-align: center;
font-size: 16px;
}


/*	sec08
----------------------------------------------------*/
#sec08 {
background: #dff3ff;
}

#sec08 .box {
background: url(../images/sec08_bg.png) repeat;
}


/*	sec09
----------------------------------------------------*/
#sec09 {
background: #fcf1f1;
}

/*	sec10
----------------------------------------------------*/
#section10 {
background:url(../images/section10_bg.png) repeat-x;
}


footer {
width: 100%;
background: #232323;
}

footer p {
font-size: 12px;
text-align: center;
color: #fff;
}

/* ===================================================================
Pagetop
=================================================================== */
.pagetop {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 77%;
}

.pagetop a {
display: block;
width: 100px;
padding: 1em 0;
text-align: center;
text-decoration: none;
color: white;
border-radius: 0.5em;
background: #666;
}

.pagetop a:hover {
text-decoration: none;
background: #999;
}

/* ===================================================================
Rollover 背景が白の時用
=================================================================== */
a img {
opacity: 1;
transition: .3s ease-in-out; 
}

a:hover img {
opacity: .7;
filter: alpha(opacity=30);
}