/* CSS Document */ /*------------------------------------------------------ common css ------------------------------------------------------*/ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html { width: 100%; overflow: scroll; font-size: 10px; } body { font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #000; line-height: 1; background-color: #fce6cd; overflow: hidden; } .container { width: 100%; margin-left: auto; margin-right: auto; } ul { list-style: none; } img { vertical-align: bottom; width: 100%; height: auto; } a { text-decoration: none; color: #a560a2; text-decoration: underline;} a:hover { text-decoration: underline; } .pc { display:block; } .tab { display:none; } .sp { display:none; } .text { font-size: 1.6rem; line-height: 2;} .mincho { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; } main { display: block; } @media (min-width: 769px) { body{ min-width: 1000px; } .container { max-width: 1000px; } } @media (max-width: 768px) { .container { margin-left: 20px; margin-right: 20px; width: auto; } .pc { display: none; } .tab { display: block; } .text { font-size: 1.8rem;} } @media (max-width: 480px) { .container { margin-left: 10px; margin-right: 10px; width: auto; } .sp { display: block; } .text { line-height: 1.8;} } /*------------------------------------------------------ row ------------------------------------------------------*/ .colWrap { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: stretch; -webkit-align-items: stretch; align-content: stretch; -webkit-align-content: stretch; } .col2-1 { width: 50%; } .col3-1 { width: -webkit-calc( 100% / 3 ); width: calc( 100% / 3 ); } @media (max-width: 768px) { .col2-1 { width: 100%; } .col3-1 { width: 50%; } } @media (max-width: 480px) { .col3-1 { width: 100%; } } /*------------------------------------------------------ header ------------------------------------------------------*/ header nav.container { width: 100%; background-color: #a560a2; margin: 0; max-width: none; position: absolute; top: 0; display: none;} header nav ul { padding-top: 69px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } header nav ul li { width: 100%; height: auto; border-top: 1px solid #fff; } header nav a { display: block; height: 100%; line-height: 75px; font-size: 2rem; text-align: center; color: #fff; text-decoration: none;} header nav a:hover { text-decoration: none;} @media (min-width: 769px) { } @media (max-width: 768px) { } #menu { background: url(../sp/menuOpen.png) no-repeat left top; width: 69px; height: 69px; background-size: 100% auto; position: absolute; top: 0; right: 0; z-index: 999;} #menu.active { background: url(../sp/menuClose.png) no-repeat left top; width: 69px; height: 69px; background-size: 100% auto;} /*------------------------------------------------------ cnt1 ------------------------------------------------------*/ main { margin-top: 100px; } #cnt1_1 { margin-bottom: 90px; position: relative; } #cnt1_1:before { content: ''; background: url(../images/bgImg01.png) no-repeat left top; width: 200px; height: 190px; position: absolute; z-index: -1;} #cnt1_1 .title img { width: auto; max-width: 91px;} #cnt1_2 { max-width: 780px; margin: auto auto 100px;} #cnt1_2 .title { max-width: 295px; margin: auto auto 40px; } #cnt1_2 .text { font-size: 1.7rem;} #cnt1_3 { background: url(../images/bgImg02.png) no-repeat left top; background-size: cover; position: relative; margin-bottom: 90px;} #cnt1_3:before { content: ''; background: url(../images/bgImg03.png) no-repeat left top; width: 262px; height: 210px; position: absolute; } #cnt1_3 .title img { max-width: 311px;} @media (min-width: 769px) { #cnt1_1:before { right: 240px; bottom: -30px; } #cnt1_1 .title { text-align: right; padding-right: 130px; } #cnt1_1 .col2-1:first-child { width: 518px; } #cnt1_1 .col2-1:last-child { width: -webkit-calc( 100% - 518px ); width: calc( 100% - 518px ); } #cnt1_3 { padding: 95px 20px 100px 150px; } #cnt1_3:before { right: -10px; bottom: 0;} #cnt1_3 .col2-1:first-child { padding-top: 70px; width: -webkit-calc( 100% - (418px + 65px)); width: calc( 100% - (418px + 65px)); } #cnt1_3 .col2-1:last-child { width: 418px; } } @media (max-width: 768px) { #cnt1_1:before { top: 270px; left: -webkit-calc(50% - 180px); left: calc(50% - 180px); } #cnt1_1 { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } #cnt1_1 .title { text-align: center; margin-bottom: 40px; } #cnt1_1 .col2-1:first-child { text-align: center; } #cnt1_1 .col2-1:first-child img { max-width: 518px;} #cnt1_3 { padding: 140px 50px 100px; } #cnt1_3:before { right: 0; bottom: 0;} #cnt1_3 .title { text-align: center; margin-bottom: 40px;} #cnt1_3 .img { text-align: center;} #cnt1_3 .img img { max-width: 418px; } #cnt1_3 .col2-1:first-child { margin-bottom: 20px; } } @media (max-width: 480px) { main { margin-top: 50px; } #cnt1_2 { margin-bottom: 50px;} #cnt1_3 { padding: 140px 20px 100px; margin-bottom: 0; } } /*------------------------------------------------------ cnt2 ------------------------------------------------------*/ #cnt2 { background: url(../images/bgImg04.png) repeat-x left top #fff; } #cnt2 .title { max-width: 761px; margin-bottom: 90px;} #cnt2_1 { position: relative; margin-bottom: 50px;} #cnt2_1 .sub-title { text-align: center; margin-bottom: 25px;} #cnt2_1 .sub-title img { max-width: 300px;} #cnt2_1 .text { padding: 0 70px 135px; background: url(../images/cnt2_pic01.png) no-repeat center bottom; background-size: 334px auto; } #cnt2_1 .img { text-align: center;} #cnt2_1 .img img { max-width: 538px;} #cnt2_2 { margin-bottom: 50px; } #cnt2_2 .img img { max-width: 489px; } #cnt2_2 .sub-title { max-width: 229px; margin-bottom: 25px;} #cnt2_3 .img img { max-width: 521px; } #cnt2_3 .sub-title { max-width: 330px; margin-bottom: 25px;} #cnt2_3 .sub-title img { } #cnt2_3 .text { position: relative;} #cnt2_3 .text:after { content :''; background: url(../images/cnt2_pic02.png) no-repeat right bottom; width: 183px; height: 87px; background-size: 100% auto; position: absolute; left: 0; bottom: -100px; } @media (min-width: 769px) { #cnt2 { padding-top: 280px; } #cnt2_1 { right: -60px; } #cnt2_1 .col2-1:first-child { width: -webkit-calc( 100% - 538px ); width: calc( 100% - 538px ); } #cnt2_1 .col2-1:last-child { width: 538px; } #cnt2_2 .col2-1:first-child { width: 521px; } #cnt2_2 .col2-1:last-child { width: -webkit-calc( 100% - (521px + 60px)); width: calc( 100% - (521px + 60px)); padding-right: 50px; } #cnt2_3 .col2-1:first-child { width: 521px; } #cnt2_3 .col2-1:last-child { width: -webkit-calc( 100% - (521px + 60px)); width: calc( 100% - (521px + 60px)); padding-right: 50px; } #cnt2_3 .img { position: relative; bottom: -20px;} } @media (max-width: 768px) { #cnt2 { padding-top: 200px; } #cnt2 .title img { max-width: 297px; margin-left: auto; margin-right: auto; } #cnt2_1 .text { padding-left: 0; padding-right: 0;} #cnt2_1 .col2-1:first-child { margin-bottom: 30px;} #cnt2_2 , #cnt2_3 { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } #cnt2_3 { padding-bottom: 30px; } #cnt2_2 .col2-1:last-child , #cnt2_3 .col2-1:last-child { margin-bottom: 30px;} #cnt2_2 .img , #cnt2_3 .img { text-align: center; } #cnt2_2 .sub-title , #cnt2_3 .sub-title { margin-left: auto; margin-right: auto;} #cnt2_3 .text:after { left: -webkit-calc( 50% - 91px ); left: calc( 50% - 91px ); } #cnt2_3 .col2-1:last-child { margin-bottom: 130px;} } @media (max-width: 480px) { } /*------------------------------------------------------ cnt3 ------------------------------------------------------*/ #cnt3 .bg { background: url(../images/bgImg05.png) left top #fff; padding-top: 190px; padding-bottom: 40px;} #cnt3 .title { background-color: #17a0c7; margin-bottom: 100px;} #cnt3 .title span { display: block; } #cnt3 .title img { max-width: 801px; } #cnt3_1 .img { padding-bottom: 60px; background: url(../images/cnt3_pic01.png) no-repeat left bottom; background-size: 160px auto;} #cnt3_1 .img img { max-width: 518px;} #cnt3_1 .sub-title { max-width: 263px; margin-bottom: 40px; margin-top: 30px;} #cnt3 .bg2 { background-color: #fff6e6;} #cnt3 .bg2 .container { background: url(../images/bgImg06.png) no-repeat right top;} #cnt3 .caption { font-size: 1.4rem; color: #46027a; margin-top: 10px;} #cnt3_2 { margin-bottom: 50px; } #cnt3_2 .img img { max-width: 518px; } #cnt3_2 .sub-title { max-width: 229px; margin-bottom: 40px; margin-top: 30px; } #cnt3_2 .text { background: url(../images/cnt3_pic02.png) no-repeat right bottom; background-size: 139px auto; padding-bottom: 70px;} #cnt3_2 .caption { text-align: right;} #cnt3_3 { margin-bottom: 50px; } #cnt3_3 .img { background: url(../images/cnt3_pic03.png) no-repeat right bottom; background-size: 135px auto; padding-bottom: 40px; } #cnt3_3 .img img { max-width: 520px; } #cnt3_3 .sub-title { max-width: 397px; margin-bottom: 20px; margin-top: 30px; } #cnt3_4 .img { background: url(../images/cnt3_pic04.png) no-repeat left +20px bottom; background-size: 220px auto; padding-bottom: 90px; position: relative; z-index: 1;} #cnt3_4 .img img { max-width: 518px; } #cnt3_4 .sub-title { max-width: 195px; margin-bottom: 40px; margin-top: 30px; } @media (min-width: 769px) { #cnt3 .title { height: 153px; } #cnt3 .title span { padding-top: 22px;} #cnt3_1 .col2-1:first-child , #cnt3_2 .col2-1:first-child , #cnt3_3 .col2-1:first-child , #cnt3_4 .col2-1:first-child { width: 518px; } #cnt3_1 .col2-1:last-child , #cnt3_2 .col2-1:last-child , #cnt3_3 .col2-1:last-child , #cnt3_4 .col2-1:last-child { width: -webkit-calc( 100% - (518px + 80px)); width: calc( 100% - (518px + 80px)); } #cnt3 .bg2 .container { background-position: right top +150px;} #cnt3_2 .text { background-position: right +90px bottom;} } @media (max-width: 768px) { #cnt3 .title img { padding: 20px 0; max-width: 336px; margin-left: auto; margin-right: auto;} #cnt3_1 , #cnt3_2 , #cnt3_3 , #cnt3_4 { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } #cnt3_1 .img { text-align: center; background-position: center bottom;} #cnt3_1 .sub-title , #cnt3_2 .sub-title , #cnt3_3 .sub-title , #cnt3_4 .sub-title { margin-left: auto; margin-right: auto;} #cnt3_1 .col2-1:last-child , #cnt3_2 .col2-1:last-child , #cnt3_3 .col2-1:last-child , #cnt3_4 .col2-1:last-child { margin-bottom: 30px; } #cnt3 .bg2 { padding: 50px 0;} #cnt3 .bg2 .container { background-repeat-y: repeat; } #cnt3_2 .img , #cnt3_3 .img , #cnt3_4 .img { text-align: center;} #cnt3 .caption { text-align: center;} #cnt3_2 .text , #cnt3_3 .img , #cnt3_4 .img { background-position: center bottom;} #cnt3_3 .img { padding-bottom: 70px;} } @media (max-width: 480px) { #cnt3 .bg { padding-top: 90px;} #cnt3 .title { margin-bottom: 50px;} } /*------------------------------------------------------ cnt4 ------------------------------------------------------*/ #cnt4 { position: relative; top: -25px; background: url(../images/bgImg08.png) repeat-x left bottom; padding-bottom: 140px; margin-bottom: 60px; } #cnt4 .bg { background: url(../images/bgImg07.jpg) left top #fff; padding-top: 190px; padding-bottom: 120px;} #cnt4 .title { background-color: #d4b70e; margin-bottom: 100px;} #cnt4 .title span { display: block; } #cnt4 .title img { max-width: 760px; } #cnt4_1 .sub-title { max-width: 363px; margin-bottom: 35px;} #cnt4_1 .img { text-align: center; } #cnt4_1 .img img { max-width: 367px;} #cnt4_2 { position: relative; top: -30px;} #cnt4_2 .col2-1:first-child .img img { max-width: 422px;} #cnt4_2 .col2-1:last-child .img { padding-bottom: 88px; background: url(../images/cnt4_pic01.png) no-repeat right +30px bottom; background-size: 208px auto;} #cnt4_2 .col2-1:last-child .img img { max-width: 521px;} #cnt4_2 .sub-title { max-width: 263px; margin-bottom: 35px;} #cnt4_2 .text { margin-bottom: 25px;} #cnt4_3 { margin-bottom: 40px;} #cnt4_3 .col2-1:first-child .img { padding-bottom: 100px; background: url(../images/cnt4_pic02.png) no-repeat center bottom; background-size: 426px auto;} #cnt4_3 .col2-1:first-child .img img { max-width: 521px;} #cnt4_3 .col2-1:last-child .img img { max-width: 452px; } #cnt4_3 .sub-title { max-width: 296px; margin-bottom: 35px;} #cnt4_3 .text { margin-bottom: 110px;} #cnt4_4 .img img { max-width: 512px;} #cnt4_4 .sub-title { max-width: 380px; margin-bottom: 35px;} #cnt4_4 .text { padding-bottom: 110px; background: url(../images/cnt4_pic03.png) no-repeat left +30px bottom; background-size: 221px auto; } @media (min-width: 769px) { #cnt4 .title { height: 153px; } #cnt4 .title span { padding-top: 22px; } #cnt4_1 .col2-1:first-child { padding: 0 20px 0 60px; } #cnt4_1 .col2-1:last-child { } #cnt4_2 .col2-1:first-child { width: -webkit-calc( 100% - 521px ); width: calc( 100% - 521px ); padding-left: 60px; } #cnt4_2 .col2-1:last-child { width: 521px; position: relative; left: 30px;} #cnt4_2 .col2-1:first-child .img { width: 422px;} #cnt4_3 .col2-1:first-child { width: 521px; } #cnt4_3 .col2-1:last-child { width: -webkit-calc( 100% - (521px + 60px)); width: calc( 100% - (521px + 60px)); } #cnt4_3 .col2-1:last-child .img { width: 452px; } #cnt4_4 .col2-1:first-child { width: 521px; text-align: right; } #cnt4_4 .col2-1:last-child { width: -webkit-calc( 100% - (521px + 60px)); width: calc( 100% - (521px + 60px)); padding-top: 40px; } } @media (max-width: 768px) { #cnt4 .title img { padding: 20px 0; max-width: 294px; margin-left: auto; margin-right: auto;} #cnt4_3 , #cnt4_4 { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } #cnt4_1 .sub-title , #cnt4_2 .sub-title , #cnt4_3 .sub-title , #cnt4_4 .sub-title { margin-left: auto; margin-right: auto;} #cnt4_1 .col2-1:first-child { margin-bottom: 20px;} #cnt4_2 { margin-bottom: 50px;} #cnt4_2 .col2-1:first-child .img { text-align: center;} #cnt4_2 .col2-1:last-child .img { text-align: center; background-position: center bottom;} #cnt4_3 { margin-bottom: 80px;} #cnt4_3 .text { margin-bottom: 20px;} #cnt4_3 .col2-1:last-child .img { text-align: center;} #cnt4_3 .col2-1:last-child { margin-bottom: 20px;} #cnt4_3 .col2-1:first-child .img { text-align: center;} #cnt4_4 .text { padding-bottom: 80px; background-position: center bottom;} #cnt4_4 .col2-1:last-child { margin-bottom: 20px; } #cnt4_4 .img { text-align: center;} } @media (max-width: 480px) { #cnt4 .bg { padding-top: 90px; padding-bottom: 100px;} #cnt4 .title { margin-bottom: 50px;} #cnt4_3 .col2-1:first-child .img { background-size: 100% auto;} } /*------------------------------------------------------ return top ------------------------------------------------------*/ #pageTop a { position: fixed; right: 0; bottom: 200px; display: block; width: 80px; height: 80px; color: #fff; font-size: 1.8rem; letter-spacing: 4px; text-align: center; padding-top: 25px; background-color: #a560a2; } #pageTop a span { display: inline-block; padding: 0 5px 10px; border-bottom: 1px solid #fff; } @media(max-width: 480px){ #pageTop a { bottom: 100px; } } footer { text-align: center; background: url(../images/bgImg09.png) repeat-x left top; height: 328px;} footer address { font-style: normal; color: #fff; font-size: 1.6rem; padding-top: 150px;} footer dt { margin-bottom: 30px;} footer dd { font-size: 2.2rem;} footer dd span.label { font-size: 1.7rem; padding-left: 40px;}