@charset "utf-8";
/* CSS Document */
/* -------------------------------------------------
01 titleArea
------------------------------------------------- */
.titleArea{
text-align: center;
margin: 0 0 10px;
}
.titleArea > div{
background: url(../images/index/mainimg.jpg) no-repeat center center;
background-size: cover;
}
.titleArea > h2 img{
width:100%;
}
/* PC */
@media print, screen and (min-width:769px) {
.titleArea > div{
height: 500px;
}
.titleArea > div p{
padding-top: 410px;
}
.titleArea > h2{
width: 227px;
margin:-20px auto 0;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.titleArea > div{
height: 200px;
}
.titleArea > div p{
padding-top: 150px;
width: 177px;
margin: 0 auto;
}
.titleArea > h2{
width: 120px;
margin:-5px auto 0;
}
}
/* -------------------------------------------------
01 rankingArea
------------------------------------------------- */
.rankingArea{
margin: 0 0 20px;
padding: 0 0 50px;
box-sizing: border-box;
}
.rankingArea > div{
height: auto;
margin: 0 auto;
}
.rankingArea > div > section{
float: left;
text-align: center;
}
.rankingArea > div > section dl{
margin: 0 0 10px;
}
.rankingArea > div > section dl dt{
width: 73px;
margin: 0 auto 10px;
}
.rankingArea > div > section dl dt img{
width: 100%;
}
.rankingArea > div > section h3{
font-size: 1.4em;
font-weight: 700;
line-height: 120%;
margin: 0 0 10px;
min-height: 50px;
}
.rankingArea > div > section h3 span{
font-size:0.7em;
font-weight: 700;
display: block;
}
.rankingArea > div > section p a{
color:#fff;
font-size: 0.95em;
background-color: #222;
display: block;
width: 50%;
margin: 0 auto;
padding: 7px 0;
text-align: center;
font-family: "Noto Sans Japanese";
border-radius: 3px;
box-shadow:1px 1px 1px 1px rgba(0,0,0,0.4);
}
.rankingArea > div > section p a:before{
content: "\f0da";
font-family: FontAwesome;
padding-right: 7px;
}
/* PC */
@media print, screen and (min-width:769px) {
.rankingArea > div{
width: 960px;
}
.rankingArea > div > section{
width: 306px;
}
.rankingArea > div > section:nth-child(n+2){
margin-left: 21px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.rankingArea > div{
padding:0 20px;
}
.rankingArea > div > section{
width: calc(33.33% - 12px);
}
.rankingArea > div > section:nth-child(n+2){
margin-left: 18px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.rankingArea > h2{
margin: 0 auto;
}
.rankingArea > div{
padding:0 40px;
}
.rankingArea > div > section{
width:100%;
float: none;
}
.rankingArea > div > section:nth-child(n+2){
margin-left:0;
margin-top: 20px;
}
.rankingArea > div > section h3{
min-height:auto;
}
}
/* -------------------------------------------------
02 familyArea
------------------------------------------------- */
.familyArea{
padding: 120px 0 0;
position: relative;
}
.familyArea > span{
position: absolute;
display: block;
}
.familyArea > p{
position: absolute;
}
.familyArea > p img{
border:5px solid #eae5e3;
}
.familyArea > section{
color:#fff;
font-weight: bold;
background: url(../../common/images/pink_bg.gif);
text-align: left;
}
.familyArea > section > p{
font-size: 1.3em;
line-height: 150%;
margin: 0 0 10px;
}
/* PC */
@media print, screen and (min-width:769px) {
.familyArea{
width: 650px;
margin: 0 auto 80px;
}
.familyArea > span{
top:0;
left: -140px;
}
.familyArea > p{
top:90px;
right:-40px;
}
.familyArea > section{
padding: 60px 60px 40px 40px;
}
.familyArea > section > h3{
font-size: 2.2em;
letter-spacing: -3px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.familyArea{
margin: 0 20px 50px;
}
.familyArea > span{
width: 230px;
top:5px;
left: -20px;
}
.familyArea > p{
bottom:20px;
right:0px;
}
.familyArea > section{
padding: 30px;
}
.familyArea > section > h3{
font-size: 1.9em;
letter-spacing: -3px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.familyArea{
margin: 0 20px 30px;
padding:0;
}
.familyArea > span{
display: none;
}
.familyArea > p{
position: relative;
width: 80%;
margin: 0 20px 0 auto;
}
.familyArea > section{
padding: 30px 30px 50px;
}
.familyArea > section > h3{
font-size: 1.7em;
}
.familyArea > section > p{
font-size: 1.1em;
}
}
/* -------------------------------------------------
03 listArea
------------------------------------------------- */
.listArea{
height: auto;
text-align: center;
}
.listArea > article{
border-top:2px solid #000;
padding: 55px 10px 40px;
box-sizing: border-box;
float: left;
}
.listArea > article p:first-child{
font-family: 'Saira Extra Condensed', sans-serif;
font-weight: 700;
font-size: 1.5em;
width: 79px;
margin: 0 auto;
background: url(../images/index/text_weddingplan.png) no-repeat center top;
background-size: 100% auto;
padding-top: 20px;
}
.listArea > article > h3{
width: 227px;
margin:110px auto 0;
}
.listArea > article > h3 img{
width: 100%;
}
.listArea > article > h4{
font-size: 1.4em;
min-height: 70px;
font-weight: 700;
line-height: 120%;
letter-spacing:-1px;
}
.listArea > article > h4 span{
display: block;
font-size:0.7em;
font-weight: 700;
}
.listArea > article p:last-child a{
color:#fff;
font-size: 0.95em;
background-color: #222;
display: block;
width: 50%;
margin: 20px auto 0;
padding: 7px 0;
text-align: center;
font-family: "Noto Sans Japanese";
border-radius: 3px;
box-shadow:1px 1px 1px 1px rgba(0,0,0,0.4);
}
.listArea > article p:last-child a:before{
content: "\f0da";
font-family: FontAwesome;
padding-right: 7px;
}
.flower02{
width: 308px;
float: left;
}
.flower02 img{
margin:80px 0 0 40px;
}
/* PC */
@media print, screen and (min-width:769px) {
.listArea{
width: 960px;
margin: 0 auto 40px;
}
.listArea > article{
width: 308px;
}
.listArea > article:nth-child(3n+1){
clear: both;
}
.listArea > article:not(:nth-child(3n+1)){
margin-left: 18px;
}
}
/* Tablet */
@media screen and (max-width:768px) {
.listArea{
margin: 0 30px 40px;
}
.listArea > article{
width:calc(50% - 15px);
}
.listArea > article:nth-of-type(2n+1){
clear: both;
margin-right: 30px;
}
}
/* SP縦向き */
@media screen and (max-width:640px) and (orientation: portrait) {
.listArea{
margin: 0 10px 30px;
}
.listArea > article{
width:calc(50% - 5px);
padding:25px 5px 20px;
}
.listArea > article:nth-of-type(2n+1){
margin-right: 10px;
}
.listArea > article > h3{
width: 90%;
margin:70px auto 0;
}
.listArea > article > h4{
min-height:auto;
margin-bottom: 17px;
margin-top: 5px;
font-size: 1.1em;
}
.listArea > article p:last-child a{
width:70%;
}
}