@charset "UTF-8";

/*
Theme Name: 森猫堂
*/

html {
    scroll-padding-top: 150px;
}
@media only screen and (max-width: 1080px) {
html {
    scroll-padding-top: 80px;
}
}

body {
	margin: 0;
	padding: 0;
	COLOR: #555;
	FONT-SIZE:20px;
font-family: "Noto Serif JP",sans-serif,'Noto Sans JP';
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 2000px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#111;
    text-decoration: none;
}

a:hover{
	outline:0;
	color: #a99509;
    text-decoration: underline;
}

a:hover img {
opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";
}

br.sp,br.spt,br.spt2,.nsp{
	display:inherit;
}
br.sm,br.smt,br.smm,br.smm2,br.spm,.nst,.nss,br.smm3{
	display:none;
}
@media only screen and (max-width: 1280px) {
br.sp,br.spm,br.smm,.smm,br.smm2,.nsp,.nss,.nsm,br.smm3{
	display:none;
}
br.spt,br.sm,br.smt,.nst{
	display:inherit;
}
}
@media only screen and (max-width: 640px) {
br.spt,br.smt,br.smm2,.nsp,.nst,.nsm,.nsm2,br.smm3{
	display:none;
}
br.spm,br.smm,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 480px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2,br.smm3{
	display:none;
}
br.spm,br.smm,br.smm2,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 414px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2{
	display:none;
}
br.spm,br.smm,br.smm2,.nss,br.smm3{
	display:inherit;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #fff;
position: sticky;
top: 0;
z-index: 9999;
box-shadow: 0 2px 10px #eddf95;
}

header img{
height: 75px;
margin: 0 15px 0 0;
}
@media only screen and (max-width: 1280px) {
header img{
height: 75px;
margin: 0 5px 0 0;
}
}
@media only screen and (max-width: 1080px) {
header img{
height:50px;
margin: 0 5px 0 0;
}
}

.header-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:10px 0 0 2%;
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
}
menu .header-title{
display: none;
}
@media only screen and (max-width: 1080px) {
.header-title{
width: 100%;
padding:5px 0 0 1%;
text-align: center;
}
.header-title img{
height: 50px;
}
menu .header-title{
width: 100%;
padding:5px 0 0px 1%;
display: flex;
align-items: center;
text-align: center;
border-bottom: 1px solid #baab58;
background: #fff;
box-shadow: 0 2px 10px #eddf95;
}
menu .header-title img{
height: 50px;
}
}
@media only screen and (max-width: 640px) {
.header-title img{
height: 50px;
}
menu .header-title{
padding:5px 0 5px 1%;
justify-content:flex-start;
}
menu .header-title img{
height: 50px;
}
}
@media only screen and (max-width: 480px) {
.header-title img{
height: 50px;
}
menu .header-title{
padding:5px 0 0px 1%;
justify-content:flex-start;
}
menu .header-title img{
height: 50px;
}
}

header h1{
clear: none;
float: left;
width: auto;
height: auto;
margin: -10px 0 0;
padding: 0;
font-size: 30px;
line-height: 100%;
color: #baab58;
font-weight: 500;
}
header h1 a:link,header h1 a:visited{
color: #baab58;
text-decoration: none;
}
@media only screen and (max-width: 1440px) {
header h1{
font-size: 25px;
}
}
@media only screen and (max-width: 1080px) {
header h1{
font-size: 25px;
margin: -10px 0 0;
}
header menu h1{
display:inherit;
}
}
@media only screen and (max-width: 480px) {
header h1{
font-size: 20px;
}
header menu h1{
font-size: 20px;
}
}
@media only screen and (max-width: 414px) {
header h1{
font-size:17px;
}
header menu h1{
font-size: 17px;
}
}

#top-banner{
clear: both;
top:15px;
right: 0;
z-index: 9999;
position: fixed; 
width: 45%; 
margin:0;
padding: 0;
text-align: center;
display: flex;
align-items: center;
justify-content:center;
}
#top-banner a{
display: block;
border-radius: 10px;
margin: 0 2% 0 0;
background: #4cc764;
padding: 7px 0;
flex: 1;
align-self:stretch;
}
#top-banner a.yoyaku{
background: #f09482;
display: flex;
align-items: center;
justify-content:center;
}

#top-banner img{
height: 40px;
}
@media only screen and (max-width: 1600px) {
#top-banner{
top:18px;
width: 50%; 
}
#top-banner img{
height: 35px;
}
}
@media only screen and (max-width: 1280px) {
#top-banner{
width: 60%; 
}
}
@media only screen and (max-width: 1080px) {
#top-banner{
clear: both;
top:inherit;
bottom:0;
right: 0;
z-index: 9999;
position: fixed; 
width: 100%; 
margin:0;
padding: 0;
text-align: center;
display: flex;
align-items: center;
justify-content:center;
}
#top-banner a{
display: block;
border-radius:0;
margin: 0;
background: #4cc764;
padding: 10px 0;
flex: 1;
align-self:stretch;
}
#top-banner a.yoyaku{
background: #f09482;
display: flex;
align-items: center;
justify-content:center;
}
}
@media only screen and (max-width: 640px) {
#top-banner img{
height: 30px;
}
}
@media only screen and (max-width: 480px) {
#top-banner a{
display: block;
border-radius:0;
margin: 0;
background: #4cc764;
padding: 10px 0;
flex: 1 0 auto;
align-self:stretch;
}
#top-banner a.yoyaku{
background: #f09482;
display: flex;
align-items: center;
justify-content:center;
}
}
@media only screen and (max-width: 414px) {
#top-banner img{
height: 25px;
}
}

#menu-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 20%;
}

menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 0;
display: flex;
align-items: center;
}

menu li{
list-style-type: none;
flex: 1 0 auto;
font-size: 18px;
line-height: 100%;
}
menu li.bno{
display: none;
}
menu li a:link,menu li a:visited{
text-decoration: none;
color: #555;
}
menu li a:hover{
border-bottom: 1px solid #baab58;
}
@media only screen and (max-width: 1440px) {
menu li{
font-size:17px;
}
}
@media only screen and (max-width: 1280px) {
menu li{
font-size:15px;
}
}

@media only screen and (max-width:1080px) {
#menu-box{
clear: both;
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
top:0;
left:0;
z-index: 9999;
background: none;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0;
text-align: left;
position: fixed;
top: 0;
background: rgba(255,255,255,1.0);
}
menu ul{
display:inherit;
clear: both;
float: left;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
background: none;
}
menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size:17px;
  line-height: 150%;
  flex: auto;
  background: none;
  border-bottom: 1px solid #ccc;
}
menu li.bno{
display: inherit;
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #555;
margin: 0;
padding: 25px 0 25px 1em;
text-align: left;
line-height: 100%;
font-size: 17px;
font-weight:500;
background: url(https://heureux-mariage.com/image/menu-li.png) no-repeat 95% center/7px;
}
menu li a:hover{
border-bottom: none;
text-decoration: none;
}
@media only screen and (max-width: 480px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #555;
padding: 20px 0 20px 1em;
text-align: left;
line-height: 100%;
font-size: 16px;
font-weight:500;
}
}
@media only screen and (max-width: 414px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #555;
padding: 20px 0 20px 1em;
text-align:left;
line-height: 100%;
font-size: 16px;
font-weight:500;
}
}
menu li a:hover{
text-decoration: underline;
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#baab58;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:5px;
  right:10px;
  z-index: 999;
  border: 2px solid #fff;
}
@media only screen and (max-width: 640px) {
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#baab58;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:5px;
  right:10px;
  z-index: 999;
  border: 2px solid #fff;
}
}
/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:11px; 
}
.openbtn4 span:nth-of-type(2) {
  top:17px;
}
.openbtn4 span:nth-of-type(3) {
  top:23px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
left: 50%; /* ここを50%に変更 */
  transform: translateX(-50%); /* これを追加 */
  color: #fff;
  font-size: 0.5rem;
  text-transform: uppercase;
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:-4px;
left: 50%; /* ここを50%に変更 */
  transform: translateX(-50%); /* これを追加 */
  color: #fff;
  font-size: 0.5rem;
  text-transform: uppercase;
}
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 12px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 24px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg) translateY(16px); /* ここを12pxに調整 */
  font-size: 0.5rem;
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}
 
/*メイン
--------------------------------------------------------------------------*/
#photo{
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 0;
text-align: center;
z-index: 1;
position: relative;
}
#photo img{
max-width: 100%;
}

#photo img {
    /* スライドショー用の設定 */
    position: absolute; /* 全ての画像を重ねる */
    top: 0;
    left: 0;
    width: 100%; /* 幅を親要素に合わせる */
    height: auto; /* 高さはアスペクト比を維持 */
    opacity: 0; /* 初期状態では全て非表示 */
    transition: opacity 2s ease-in-out; /* フェードアニメーション */
    object-fit: contain; /* 画像全体を表示し、トリミングしない */
}

/* 最初の画像だけ初期表示するために、最初の画像のopacityを1に設定するクラス */
#photo img:first-child {
    position: relative; /* 最初の画像のみ相対配置で高さを確保 */
    opacity: 1; /* 初期表示 */
}

main{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 500px;
margin: 0;
padding: 0;
}

#rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -10px 0 0;
padding:250px 0 200px;
background: url(https://heureux-mariage.com/image/rinen-r.webp) no-repeat right 40%,url(https://heureux-mariage.com/image/rinen-l.webp) no-repeat left 50%,url(https://heureux-mariage.com/image/rinen-back2.png) no-repeat center top/19%,url(https://heureux-mariage.com/image/rinen-back.png) no-repeat center top/100% 100%;
}
@media only screen and (max-width: 1600px) {
#rinen{
padding:200px 0 200px;
background: url(https://heureux-mariage.com/image/rinen-r.webp) no-repeat right 40%/25%,url(https://heureux-mariage.com/image/rinen-l.webp) no-repeat left 50%/25%,url(https://heureux-mariage.com/image/rinen-back2.png) no-repeat center top/19%,url(https://heureux-mariage.com/image/rinen-back.png) no-repeat center top/100% 100%;
}
}
@media only screen and (max-width: 1280px) {
#rinen{
padding:150px 0 160px;
background: url(https://heureux-mariage.com/image/rinen-r.webp) no-repeat right 25%/25%,url(https://heureux-mariage.com/image/rinen-l.webp) no-repeat left 35%/25%,url(https://heureux-mariage.com/image/rinen-back2.png) no-repeat center top/19%,url(https://heureux-mariage.com/image/rinen-back.png) no-repeat center top/100% 100%;
}
}
@media only screen and (max-width: 1080px) {
#rinen{
padding:100px 0 300px;
background: url(https://heureux-mariage.com/image/rinen-r.webp) no-repeat right 95%/30%,url(https://heureux-mariage.com/image/rinen-l.webp) no-repeat left 95%/30%,url(https://heureux-mariage.com/image/rinen-back2.png) no-repeat center top/19%,url(https://heureux-mariage.com/image/rinen-back.png) no-repeat center top/100% 100%;
}
}
@media only screen and (max-width: 835px) {
#rinen{
padding:80px 5% 300px;
background: url(https://heureux-mariage.com/image/rinen-r.webp) no-repeat right 95%/40%,url(https://heureux-mariage.com/image/rinen-l.webp) no-repeat left 90%/35%,url(https://heureux-mariage.com/image/rinen-back2.png) no-repeat center top/19%,url(https://heureux-mariage.com/image/rinen-back.png) no-repeat center top/100% 100%;
}
}
@media only screen and (max-width: 640px) {
#rinen{
padding:60px 5% 250px;
background: url(https://heureux-mariage.com/image/rinen-r.webp) no-repeat right 95%/45%,url(https://heureux-mariage.com/image/rinen-l.webp) no-repeat left 90%/40%,url(https://heureux-mariage.com/image/rinen-back2.png) no-repeat center top/19%,url(https://heureux-mariage.com/image/rinen-back.png) no-repeat center top/100% 100%;
}
}
@media only screen and (max-width: 480px) {
#rinen{
padding:60px 2% 220px;
background: url(https://heureux-mariage.com/image/rinen-r.webp) no-repeat right 95%/45%,url(https://heureux-mariage.com/image/rinen-l.webp) no-repeat left 90%/40%,url(https://heureux-mariage.com/image/rinen-back2.png) no-repeat center top/20%,url(https://heureux-mariage.com/image/rinen-back.png) no-repeat center top/100% 100%;
}
}

#rinen h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
text-align: center;
font-size: 40px;
color: #a99509;
font-weight: 500;
}
@media only screen and (max-width: 1280px) {
#rinen h2{
margin: 0 0 50px;
font-size: 35px;
}
}
@media only screen and (max-width: 835px) {
#rinen h2{
margin: 0 0 30px;
font-size: 30px;
}
}
@media only screen and (max-width: 480px) {
#rinen h2{
margin: 0 0 30px;
font-size: 25px;
}
}

#rinen p{
text-align: center;
font-size: 25px;
line-height: 250%;
margin: 0;
}
@media only screen and (max-width: 1600px) {
#rinen p{
font-size: 20px;
}
}
@media only screen and (max-width: 835px) {
#rinen p{
font-size: 17px;
line-height: 200%;
}
}
@media only screen and (max-width: 480px) {
#rinen p{
font-size: 16px;
line-height: 200%;
}
}
@media only screen and (max-width: 414px) {
#rinen p{
font-size: 15px;
}
}

#riyu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#riyu h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -100px 0 50px;
padding: 0;
color: #a99509;
font-size: 50px;
line-height: 140%;
font-weight: 500;
}
#riyu h2 img{
max-width: 15%;
margin: 0 0 15px;
}
@media only screen and (max-width: 1280px) {
#riyu h2{
margin: -80px 0 40px;
font-size: 40px;
}
}
@media only screen and (max-width: 835px) {
#riyu h2{
margin: -80px 0 40px;
font-size: 30px;
}
#riyu h2 img{
max-width: 20%;
margin: 0 0 5px;
}
}
@media only screen and (max-width: 640px) {
#riyu h2{
margin: -70px 0 40px;
font-size: 30px;
}
#riyu h2 img{
max-width: 25%;
margin: 0 0 5px;
}
}
@media only screen and (max-width: 480px) {
#riyu h2{
margin: -60px 0 40px;
font-size: 25px;
}
}
@media only screen and (max-width: 414px) {
#riyu h2{
margin: -50px 0 40px;
font-size: 25px;
}
#riyu h2 img{
max-width: 28%;
margin: 0 0 5px;
}
}

#riyu h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: center;
font-size: 40px;
color: #a99509;
font-weight: 500;
line-height: 120%;
}
#riyu p{
text-align: left;
font-size: 20px;
line-height: 200%;
margin: 0;
}
@media only screen and (max-width: 1280px) {
#riyu h3{
margin: 0 0 30px;
font-size: 35px;
}
#riyu p{
font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
#riyu h3{
margin: 0 0 30px;
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#riyu p{
font-size: 17px;
text-align: justify;
text-justify: inter-ideograph;
}
}
@media only screen and (max-width: 480px) {
#riyu h3{
margin: 0 0 15px;
font-size: 25px;
}
#riyu p{
font-size: 16px;
text-align: justify;
text-justify: inter-ideograph;
}
}

#riyu1,#riyu3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 190px 0 130px 3%;
background: url(https://heureux-mariage.com/image/riyu1.png) no-repeat 3% top,url(https://heureux-mariage.com/image/riyu1back.webp) no-repeat right bottom;
}
#riyu3{
margin: 80px 0 0;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right bottom;
}
#riyu2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 190px 3% 130px 0;
background: url(https://heureux-mariage.com/image/riyu2.png) no-repeat 97% top,url(https://heureux-mariage.com/image/riyu2back.webp) no-repeat left bottom;
}
@media only screen and (max-width: 1600px) {
#riyu1,#riyu3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 150px 0 130px 3%;
background: url(https://heureux-mariage.com/image/riyu1.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu1back.webp) no-repeat right center/80%;
}
#riyu3{
margin: 20px 0 0;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right bottom/80%;
}
#riyu2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 150px 3% 130px 0;
background: url(https://heureux-mariage.com/image/riyu2.png) no-repeat 97% top/10%,url(https://heureux-mariage.com/image/riyu2back.webp) no-repeat left center/80%;
}
}
@media only screen and (max-width: 1440px) {
#riyu3{
margin: 20px 0 0;
padding: 120px 0 100px 3%;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right bottom/80%;
}
}
@media only screen and (max-width: 1280px) {
#riyu1,#riyu3{
padding: 120px 0 60px 3%;
background: url(https://heureux-mariage.com/image/riyu1.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu1back.webp) no-repeat right center/80%;
}
#riyu3{
margin: 20px 0 0;
padding: 120px 0 60px 3%;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right center/80%;
}
#riyu2{
margin: 20px 0 0;
padding: 120px 3% 60px 0;
background: url(https://heureux-mariage.com/image/riyu2.png) no-repeat 97% top/10%,url(https://heureux-mariage.com/image/riyu2back.webp) no-repeat left center/80%;
}
}
@media only screen and (max-width: 1080px) {
#riyu1,#riyu3{
padding: 180px 0 60px 3%;
background: url(https://heureux-mariage.com/image/riyu1.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu1back.webp) no-repeat right top/80%;
}
#riyu3{
margin: 0;
padding: 180px 0 60px 3%;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right top/80%;
}
#riyu2{
margin: 0;
padding: 180px 3% 60px 0;
background: url(https://heureux-mariage.com/image/riyu2.png) no-repeat 97% top/10%,url(https://heureux-mariage.com/image/riyu2back.webp) no-repeat left top/80%;
}
}
@media only screen and (max-width: 640px) {
#riyu1,#riyu3{
padding: 170px 0 60px 0;
background: url(https://heureux-mariage.com/image/riyu1.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu1back.webp) no-repeat right top/80%;
}
#riyu3{
margin: 0;
padding: 170px 0 60px 0;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top/10%,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right top/80%;
}
#riyu2{
margin: 0;
padding: 170px 0 60px 0;
background: url(https://heureux-mariage.com/image/riyu2.png) no-repeat 97% top/10%,url(https://heureux-mariage.com/image/riyu2back.webp) no-repeat left top/80%;
}
}
@media only screen and (max-width: 480px) {
#riyu1,#riyu3{
padding: 200px 0 30px 0;
background: url(https://heureux-mariage.com/image/riyu1.png) no-repeat 3% top/20%,url(https://heureux-mariage.com/image/riyu1back.webp) no-repeat right 12%/90%;
}
#riyu3{
margin: 0;
padding: 200px 0 30px 0;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top/20%,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right 12%/90%;
}
#riyu2{
margin: 0;
padding: 200px 0 30px 0;
background: url(https://heureux-mariage.com/image/riyu2.png) no-repeat 3% top/20%,url(https://heureux-mariage.com/image/riyu2back.webp) no-repeat right 12%/90%;
}
}
@media only screen and (max-width: 414px) {
#riyu1,#riyu3{
padding: 180px 0 30px 0;
background: url(https://heureux-mariage.com/image/riyu1.png) no-repeat 3% top/16%,url(https://heureux-mariage.com/image/riyu1back.webp) no-repeat right 8%/90%;
}
#riyu3{
margin: 0;
padding: 180px 0 30px 0;
background: url(https://heureux-mariage.com/image/riyu3.png) no-repeat 3% top/16%,url(https://heureux-mariage.com/image/riyu3back.webp) no-repeat right 8%/90%;
}
#riyu2{
margin: 0;
padding: 180px 0 30px 0;
background: url(https://heureux-mariage.com/image/riyu2.png) no-repeat 3% top/16%,url(https://heureux-mariage.com/image/riyu2back.webp) no-repeat right 8%/90%;
}
}

.riyu-text{
clear: both;
float: left;
width: 35%;
height: auto;
margin: 0;
padding: 60px 2% 50px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 65%;
}
@media only screen and (max-width: 1600px) {
.riyu-text{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0;
padding: 60px 2% 50px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 55%;
}
}
@media only screen and (max-width: 1440px) {
.riyu-text{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 0;
padding: 60px 2% 50px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 50%;
}
}
@media only screen and (max-width: 1280px) {
.riyu-text{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0;
padding: 50px 2% 50px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 40%;
}
}
@media only screen and (max-width: 1080px) {
.riyu-text{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 0;
padding: 40px 2% 40px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 20%;
}
}
@media only screen and (max-width: 835px) {
.riyu-text{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0;
padding: 30px 3% 30px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 10%;
}
}
@media only screen and (max-width: 640px) {
.riyu-text{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 5% 30px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 0%;
}
}
@media only screen and (max-width: 480px) {
.riyu-text{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 5% 15px;
background-color:rgba(255,255,255,0.8);
border-radius: 15px;
}
#riyu2 .riyu-text{
margin: 0 0 0 0%;
}
}

#toi1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 80px 0 0px;
padding: 0;
text-align: right;
}
#toi1 img{
max-width: 40%;
}
@media only screen and (max-width: 1280px) {
#toi1{
margin: 50px 0 0px;
}
}
@media only screen and (max-width: 1080px) {
#toi1{
margin: 0px 0 0px;
}
#toi1 img{
max-width: 50%;
}
}
@media only screen and (max-width: 835px) {
#toi1 img{
max-width: 60%;
}
}
@media only screen and (max-width: 640px) {
#toi1 img{
max-width: 70%;
}
}
@media only screen and (max-width: 414px) {
#toi1 img{
max-width: 80%;
}
}

#price{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:250px 5% 70px;
background: url(https://heureux-mariage.com/image/price-back1.webp) no-repeat left top/100%,url(https://heureux-mariage.com/image/price-back2.webp) no-repeat right bottom/100%,#f7f4f0;
}
@media only screen and (max-width: 1440px) {
#price{
padding:200px 5% 70px;
background: url(https://heureux-mariage.com/image/price-back1.webp) no-repeat left top/100%,url(https://heureux-mariage.com/image/price-back2.webp) no-repeat right bottom/100%,#f7f4f0;
}
}
@media only screen and (max-width: 1080px) {
#price{
padding:150px 5% 70px;
background: url(https://heureux-mariage.com/image/price-back1.webp) no-repeat left top/100%,url(https://heureux-mariage.com/image/price-back2.webp) no-repeat right bottom/100%,#f7f4f0;
}
}
@media only screen and (max-width: 640px) {
#price{
padding:100px 5% 10px;
background: url(https://heureux-mariage.com/image/price-back1.webp) no-repeat left top/100%,url(https://heureux-mariage.com/image/price-back2.webp) no-repeat right bottom/100%,#f7f4f0;
}
}

#price h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0 0 70px;
text-align: center;
font-size: 40px;
color: #a99509;
font-weight: 500;
line-height: 100%;
background: url(https://heureux-mariage.com/image/price-h2.png) no-repeat center bottom;
}
@media only screen and (max-width: 1280px) {
#price h2{
margin: 0 0 50px;
padding: 0 0 60px;
font-size: 35px;
background: url(https://heureux-mariage.com/image/price-h2.png) no-repeat center bottom/35%;
}
}
@media only screen and (max-width: 835px) {
#price h2{
margin: 0 0 40px;
padding: 0 0 45px;
font-size: 30px;
background: url(https://heureux-mariage.com/image/price-h2.png) no-repeat center bottom/45%;
}
}
@media only screen and (max-width: 640px) {
#price h2{
margin: 0 0 40px;
padding: 0 0 45px;
font-size: 30px;
background: url(https://heureux-mariage.com/image/price-h2.png) no-repeat center bottom/60%;
}
}
@media only screen and (max-width: 414px) {
#price h2{
margin: 0 0 30px;
padding: 0 0 45px;
font-size: 30px;
background: url(https://heureux-mariage.com/image/price-h2.png) no-repeat center bottom/70%;
}
}

#price dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 38%;
}
@media only screen and (max-width: 1440px) {
#price dl{
margin: 0 0 80px;
padding: 0 37%;
}
}
@media only screen and (max-width: 1280px) {
#price dl{
margin: 0 0 80px;
padding: 0 35%;
}
}
@media only screen and (max-width: 1080px) {
#price dl{
margin: 0 0 80px;
padding: 0 33%;
}
}
@media only screen and (max-width: 835px) {
#price dl{
margin: 0 0 50px;
padding: 0 28%;
}
}
@media only screen and (max-width: 640px) {
#price dl{
margin: 0 0 50px;
padding: 0 20%;
}
}
@media only screen and (max-width: 480px) {
#price dl{
margin: 0 0 40px;
padding: 0 20%;
}
}
@media only screen and (max-width: 414px) {
#price dl{
margin: 0 0 40px;
padding: 0 17%;
}
}
#price dt{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 30px;
font-weight: 400;
}
#price dd{
float: left;
width: 50%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: right;
font-size: 30px;
line-height: 100%;
font-weight: 400;
}
#price dd span{
font-size: 40px;
}
@media only screen and (max-width: 1600px) {
#price dt{
font-size:28px;
}
#price dd{
font-size: 28px;
}
}
@media only screen and (max-width: 1440px) {
#price dt{
font-size:28px;
}
#price dd{
font-size: 28px;
}
}
@media only screen and (max-width: 1280px) {
#price dt{
font-size:24px;
}
#price dd{
font-size: 24px;
}
}
@media only screen and (max-width: 1080px) {
#price dt{
margin: 0 0 30px;
font-size:24px;
}
#price dd{
margin: 0 0 30px;
font-size: 24px;
}
#price dd span{
font-size: 34px;
}
}
@media only screen and (max-width: 480px) {
#price dt{
margin: 0 0 20px;
font-size:20px;
}
#price dd{
margin: 0 0 20px;
font-size: 20px;
}
#price dd span{
font-size: 30px;
}
}
@media only screen and (max-width: 414px) {
#price dd span{
font-size: 27px;
}
}

#price-service{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 25%;
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 1440px) {
#price-service{
padding: 0 15%;
}
}
@media only screen and (max-width: 1080px) {
#price-service{
padding: 0 5%;
}
}
@media only screen and (max-width: 835px) {
#price-service img{
max-height: 80px;
}
}
@media only screen and (max-width: 640px) {
#price-service{
padding: 0 0%;
}
}

.price-box{
flex: 1;
flex-basis:31.3%;
margin: 0 1% 50px;
}
.price-box p{
font-size: 25px;
line-height: 150%;
margin: 15px 0 0;
text-align: center;
}
.price-box p span{
font-size: 15px;
}
@media only screen and (max-width: 1080px) {
.price-box p{
font-size: 20px;
}
.price-box p span{
font-size: 13px;
}
}
@media only screen and (max-width: 640px) {
.price-box p{
font-size: 17px;
margin: 10px 0 0;
}
}
@media only screen and (max-width: 480px) {
.price-box{
flex: 1;
flex-basis:48%;
margin: 0 1% 40px;
}
}

#news{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 30% 70px;
}
@media only screen and (max-width: 1440px) {
#news{
padding: 100px 25% 70px;
}
}
@media only screen and (max-width: 1280px) {
#news{
padding: 100px 20% 70px;
}
}
@media only screen and (max-width: 1080px) {
#news{
padding: 80px 10% 60px;
}
}
@media only screen and (max-width: 835px) {
#news{
padding: 80px 5% 60px;
}
}
@media only screen and (max-width: 640px) {
#news{
padding: 50px 5% 50px;
}
}

#news h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-size: 30px;
line-height: 100%;
font-weight: 500;
background: url(https://heureux-mariage.com/image/news-h1.png) no-repeat 20% top,url(https://heureux-mariage.com/image/news-h2.png) no-repeat 80% top;
}
@media only screen and (max-width: 1080px) {
#news h3{
margin: 0 0 50px;
font-size: 25px;
background: url(https://heureux-mariage.com/image/news-h1.png) no-repeat 20% top,url(https://heureux-mariage.com/image/news-h2.png) no-repeat 80% top;
}
}
@media only screen and (max-width: 835px) {
#news h3{
margin: 0 0 40px;
font-size: 20px;
background: url(https://heureux-mariage.com/image/news-h1.png) no-repeat 10% top,url(https://heureux-mariage.com/image/news-h2.png) no-repeat 90% top;
}
}
@media only screen and (max-width: 480px) {
#news h3{
margin: 0 0 40px;
font-size: 20px;
background: url(https://heureux-mariage.com/image/news-h1.png) no-repeat left top/25%,url(https://heureux-mariage.com/image/news-h2.png) no-repeat right top/25%;
}
}

#news ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
}
#news li{
float: left;
width: 100%;
list-style-type: none;
margin: 0 0 15px;
padding: 0 0 20px;
text-align: left;
font-size: 15px;
line-height:200%;
border-bottom: 1px solid #a99509;
}
#news li h4{
clear: both;
float: left;
width: 100%;
font-size: 17px;
font-weight: 400;
margin: 0;
padding: 0;
text-align: left;
line-height: 120%;
}
#news li a:link,#news li a:visited{
text-decoration: none;
color: #555;
}
#news li a:hover{
color: #111;
}
@media only screen and (max-width: 835px) {
#news li h4{
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
#news li{
font-size: 13px;
}
#news li h4{
font-size: 15px;
}
}

#news p{
clear: both;
font-size: 15px;
line-height: 100%;
margin: 0;
text-align: right;
}
#news p span{
border: 1px solid #999;
padding: 7px 3%;
}
@media only screen and (max-width: 480px) {
#news p{
font-size: 13px;
}
}

.js-fadeUp {
  opacity: 0; 
  transform: translateY(50px);
  transition: opacity .8s, transform 1.2s; 
}
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; 
}

#photo-sub{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
}
#photo-sub img{
max-width: 100%;
}

main.sub-p header{
display: none;
}

#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 20% 50px;
text-align: left;
}
@media only screen and (max-width: 1600px) {
#sub-page{
padding: 100px 15% 50px;
}
}
@media only screen and (max-width: 1440px) {
#sub-page{
padding: 100px 10% 50px;
}
}
@media only screen and (max-width: 1280px) {
#sub-page{
padding: 100px 5% 50px;
}
}
@media only screen and (max-width: 1080px) {
#sub-page{
padding: 80px 5% 50px;
}
}
@media only screen and (max-width: 835px) {
#sub-page{
padding: 60px 5% 50px;
}
}
@media only screen and (max-width: 640px) {
#sub-page{
padding: 45px 5% 50px;
}
}
@media only screen and (max-width: 480px) {
#sub-page{
padding: 30px 5% 50px;
}
}

#sub-page h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 30px 0;
text-align: center;
color: #baab58;
font-weight: 500;
font-size: 40px;
line-height: 100%;
background: url(https://heureux-mariage.com/image/h1-sub.png) no-repeat 10% center/auto 100%,url(https://heureux-mariage.com/image/h1-sub.png) no-repeat 90% center/auto 100%;
}
@media only screen and (max-width: 1080px) {
#sub-page h1{
margin: 0 0 80px;
padding: 25px 0;
font-size: 35px;
background: url(https://heureux-mariage.com/image/h1-sub.png) no-repeat 5% center/auto 100%,url(https://heureux-mariage.com/image/h1-sub.png) no-repeat 95% center/auto 100%;
}
}
@media only screen and (max-width: 835px) {
#sub-page h1{
margin: 0 0 80px;
padding: 20px 0;
font-size: 30px;
background: url(https://heureux-mariage.com/image/h1-sub.png) no-repeat left center/auto 100%,url(https://heureux-mariage.com/image/h1-sub.png) no-repeat right center/auto 100%;
}
}
@media only screen and (max-width: 640px) {
#sub-page h1{
margin: 0 0 60px;
padding: 15px 0;
}
}
@media only screen and (max-width: 480px) {
#sub-page h1{
margin: 0 0 60px;
padding: 10px 0;
font-size: 25px;
}
}
@media only screen and (max-width: 414px) {
#sub-page h1{
margin: 0 0 60px;
padding: 5px 0;
font-size: 22px;
}
}

#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#flow dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
}
#flow dt{
clear: both;
float: left;
width: 35%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 30px;
line-height: 120%;
font-weight: 500;
color: #baab58;
}
#flow dt span{
border: 1px solid #baab58;
margin: 0 2% 0 0;
padding: 0 3%;
font-size: 25px;
}
#flow dt em{
font-style: normal;
font-size: 17px;
}
#flow dd{
float: left;
width: 65%;
height: auto;
margin: 0;
padding: 0 0 0 5%;
text-align: left;
font-size: 20px;
line-height: 200%;
}
@media only screen and (max-width: 1080px) {
#flow dt{
width: 40%;
font-size:25px;
}
#flow dt span{
font-size: 20px;
}
#flow dt em{
font-size: 15px;
}
#flow dd{
width: 60%;
font-size:17px;
}
}
@media only screen and (max-width: 835px) {
#flow dt{
width: 100%;
font-size:25px;
margin: 0 0 15px;
}
#flow dt span{
font-size: 17px;
margin: 0 2% 0 0;
padding: 0 1.5%;
}
#flow dd{
clear: both;
width: 100%;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
#flow dd{
font-size:16px;
text-align: justify;
}
}
@media only screen and (max-width: 480px) {
#flow dt{
font-size:22px;
font-weight: 600;
}
#flow dt span{
padding: 0 2%;
}
}
@media only screen and (max-width: 414px) {
#flow dt span{
padding: 0 2.5%;
}
}

#flow dd a{
text-decoration: underline;
font-weight: 600;
}

#flow hr{
clear: both;
float: left;
width: 100%;
height: auto;
border: none;
margin: 50px 0 60px;
padding: 25px 0 0;
background: url(https://heureux-mariage.com/image/flow-dl.png) no-repeat center top;
}
@media only screen and (max-width: 1080px) {
#flow hr{
margin: 50px 0 60px;
padding: 25px 0 0;
background: url(https://heureux-mariage.com/image/flow-dl.png) no-repeat center top/30%;
}
}
@media only screen and (max-width: 835px) {
#flow hr{
background: url(https://heureux-mariage.com/image/flow-dl.png) no-repeat center top/35%;
}
}
@media only screen and (max-width: 640px) {
#flow hr{
margin: 50px 0 60px;
padding: 25px 0 0;
background: url(https://heureux-mariage.com/image/flow-dl.png) no-repeat center top/40%;
}
}
@media only screen and (max-width: 480px) {
#flow hr{
margin: 40px 0 45px;
padding: 25px 0 0;
background: url(https://heureux-mariage.com/image/flow-dl.png) no-repeat center top/45%;
}
}
@media only screen and (max-width: 414px) {
#flow hr{
background: url(https://heureux-mariage.com/image/flow-dl.png) no-repeat center top/50%;
}
}

#faq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#faq dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#faq dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 15px 3%;
background: #baab58;
color: #fff;
font-size: 25px;
line-height: 120%;
font-weight: 600;
text-align: left;
}
#faq dt.c1{
background: #c6a676;
}
#faq dt.c2{
background: #988f75;
}
#faq dd{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 30px 3%;
text-align: left;
font-size: 20px;
line-height: 200%;
box-shadow: 2px 2px 10px #eee;
}
#faq dd p{
margin: 0 0 40px;
text-align: left;
}
@media only screen and (max-width: 1080px) {
#faq dt{
font-size: 20px;
}
#faq dd{
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#faq dd{
margin: 0 0 60px;
padding: 20px 3%;
}
}
@media only screen and (max-width: 480px) {
#faq dt{
font-size:18px;
}
#faq dd{
font-size: 16px;
margin: 0 0 50px;
padding: 15px 3%;
}
}

#faq ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 5%;
}
#faq ul li{
font-size: 20px;
line-height: 150%;
margin: 0 0 20px;
padding: 0;
text-align: left;
}
@media only screen and (max-width: 640px) {
#faq ul li{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#faq ul li{
font-size: 16px;
margin: 0 0 15px;
}
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
}
@media only screen and (max-width: 1080px) {
#page-top{
	right:16px;
	bottom:70px;
}
}
@media only screen and (max-width: 640px) {
#page-top{
	right:10px;
	bottom:65px;
}
}
@media only screen and (max-width: 480px) {
#page-top{
	width:35px;
	height:35px;
	right:10px;
	bottom:65px;
}
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#baab58;
	transition:all 0.3s;
	color:#fff;
} 
#page-top p:hover{
	background:#baab58f;
	color:#fff;
} 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}
@media only screen and (max-width: 480px) {
#page-top p{
font-size: 15px;
} 
#move-page-top{
	line-height:35px;
}
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 150px 3% 30px;
text-align: left;
background: url(https://heureux-mariage.com/image/footer.png) no-repeat left bottom/100% 100%;
display: flex;
align-items: center;
}
@media only screen and (max-width: 1600px) {
footer{
padding: 130px 3% 30px;
background: url(https://heureux-mariage.com/image/footer.png) no-repeat left bottom/130% 100%;
}
}
@media only screen and (max-width: 1280px) {
footer{
padding: 80px 3% 15px;
background: url(https://heureux-mariage.com/image/footer.png) no-repeat left bottom/140% 100%;
}
}
@media only screen and (max-width: 1080px) {
footer{
padding: 50px 3% 40px;
background: url(https://heureux-mariage.com/image/footer.png) no-repeat left bottom/100% 100%;
}
footer img{
display: none;
}
}
@media only screen and (max-width: 414px) {
footer{
padding: 50px 3% 40px;
background: url(https://heureux-mariage.com/image/footer.png) no-repeat left bottom/120% 100%;
}
}

footer ul{
clear: none;
float: right;
width: 70%;
height: auto;
margin: 0 0 0 30%;
padding: 0;
display: flex;
}
@media only screen and (max-width: 1440px) {
footer ul{
clear: none;
float: right;
width: 80%;
height: auto;
margin: 0 0 0 20%;
padding: 0;
display: flex;
}
}
@media only screen and (max-width: 1280px) {
footer ul{
clear: none;
float: right;
width: 85%;
height: auto;
margin: 0 0 0 15%;
padding: 0;
display: flex;
}
}
@media only screen and (max-width: 1080px) {
footer ul{
display: none;
}
}
footer li{
flex: 1 0 auto;
margin: 0 0 0 1%;
padding: 0 0 5px;
font-size: 15px;
line-height: 100%;
list-style-type: none;
}
footer li a:link,footer li a:visited{
text-decoration: none;
color: #555;
}
footer li a:hover{
color: #222;
border-bottom: 1px solid #a99509;
}