/* ----------------------------------------------------------- #header .navArea ul.navi ----------------------------------------------------------- */ #header .navArea ul.navi a.p_event:before { background: #ddd; } #header .navArea ul.navi a.p_event:hover:before { background: transparent; } .headlineImgPhotography { background: url(../images/staff/t.jpg) center center no-repeat; background-size:cover; } .headlineImgPhotography_plan01 { background: url(../images/photography/h_dress.jpg) bottom center no-repeat; background-size:cover; } .headlineImgPhotography_plan02 { background: url(../images/photography/h_dress.jpg) bottom center no-repeat; background-size:cover; } /* ----------------------------------------------------------- #w_about ----------------------------------------------------------- */ #w_about {padding: 0px 5% 90px;position: relative;z-index: 1;text-align: center;} #w_about h3 { margin: 0 auto; font-size: 25px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; letter-spacing: 2.5px; line-height: 1.8; text-align: center; } /* --- .conceptArea --- */ #w_about .descriptionArea { margin-top: 20px; position: relative; z-index: 1; margin: 20px auto 0; } #w_about .descriptionArea p {font-size: 17px;line-height: 2.1;letter-spacing: 2px;margin-top: 1em;text-align: left;} #w_about .descriptionArea h2 {font-size: 20px;line-height: 2.4;letter-spacing: 2px;margin-top: 2em;text-align: center;border-bottom: 1px solid #eee;border-top: 1px solid #eee;} /* --- .nameArea --- */ #w_about .nameArea { margin: 80px 0 0; position: relative; z-index: 2; } #w_about .nameArea:before {position: absolute;top: 7px;left: 0;bottom: 7px;right:0;content: "";/* border: #ddd 1px solid; */background: #fefefe;z-index: -2;} #w_about .nameArea:after {position: absolute;top: 0;left: 7px;bottom: 0;right:7px;content: "";border: #ddd 1px solid;z-index: -2;} /* --- .inner --- */ #w_about .nameArea .inner { padding:70px 5%; } #w_about .nameArea .inner p.txsec{text-align:left; font-size:15px; } /* --- .inner --- */ #w_about .nameArea .inner2 { padding:10px 5%; 70px; } /* .imgArea */ #w_about .nameArea .imgArea {float:left;width: 50%;position:relative;z-index:1;margin: 0 25%;} /* .imgAreacolumn */ #w_about .nameArea .imgArea2 { float:left; width:100%; position:relative; z-index:1; } #w_about .nameArea .imgArea2 img{ float:left; width:25%; padding:1%; } #w_about .nameArea .imgArea2:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #fefefe; z-index: 5; opacity: 0; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } #w_about .nameArea .imgArea2 .c-dlist_m:before { position: absolute; top: 7px; left: 0; bottom: 7px; right: 0; content: ""; border: #a3d9e0 2px solid; background: #fefefe; z-index: -2; margin:10px 0; } #w_about .nameArea .imgArea2 .c-dlist_m { width: 48%; float:left; padding: 0% 1.5% 30px; margin: 5% 1%; margin-bottom: 30px; } #w_about .nameArea .imgArea2 .c-dlist_m p{ font-weight:600; color: #1d9faf; font-size: 18px; } #w_about .nameArea .imgArea2 .c-dlist_m:after { position: absolute; top: 0; left: 7px; bottom: 0; right: 7px; content: ""; border: #a3d9e0 1px dotted; z-index: -2; margin:10px 0; } #w_about .nameArea .c-dlist_m > dt:first-child + dd { border-top: none; } #w_about .nameArea .imgArea2 .c-dlist_m > dt { width: 26em; position: absolute; padding: 5px 0 5px 0.1em; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 15px; text-align:left; } #w_about .nameArea .imgArea2 .c-dlist_m > dt span { font-size: 13px; } #w_about .nameArea .imgArea2 .c-dlist_m > dd { padding: 5px 0.1em 5px 19em; text-align: right; border-top: 1px solid #e5e5e5; font-size: 15px; } #w_about .nameArea .imgArea2 .c-dlist_m > dd span { font-size: 13px; } #w_about .nameArea .imgArea2 .c-dlist_m > dt:first-child + dd { border-top: none; } #w_about .nameArea .imgArea2 .c-dlist_m .ptxt { font-size: 12px; text-align: left; padding-left: 1em; color: #000; font-weight: 500; } #w_about .nameArea .imgArea2 .c-dlist_m .txBox { padding: 1%; border:1px solid #eee; border-radius:5px; } #w_about .nameArea .inner2 { padding:10px 5%; 70px; } /* フレックスボックス -----------------------------------------------------------------*/ #w_about .nameArea .inner .item-container { display: flex; flex-wrap: wrap; /* border: 1px solid #eee; */ padding: 0.4em; margin: 30px 0 15px; /* margin-bottom: 100px; */ } #w_about .nameArea .inner .item_m { /* background: #f9f9f9; */ padding: 0.2em; border-radius: 5px; flex: 1 0 300px; margin: 0.4em; } #w_about .nameArea .inner .item_m p { } #w_about .nameArea .inner .item_m2 { background: #f9f9f9; padding: 1em; border-radius: 5px; flex: 1 0 220px; margin: 0.4em; } #w_about .nameArea .inner .item_m2 img{ width: 80%; margin: 0 10%; } #w_about .nameArea .inner .item_m h1 { margin-bottom: 10px; } #w_about .nameArea .inner .item_m h2 { color: #999; } #w_about .nameArea .inner .item_m p {text-align: left;padding: 20px 20px 5px;margin: 2%;padding: 0 3%;} #w_about .nameArea .inner .item_m img{ width: 100%; padding: 5%; } #w_about .nameArea .inner .item_m a { text-decoration: none; } #w_about .nameArea .inner .item_m img a:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #w_about .nameArea .inner .item_m_title{ font-size: 20px; font-weight: 600; color: #09437c; } #w_about .nameArea .inner .item_m_txt{ font-size: 16px; } @media only screen and (max-width: 500px) { #w_about .nameArea .inner .item_m p { text-align: center; padding: 5px 10px 0px; } } /* -------------------------------- Primary style -------------------------------- */ table.tab01 { width: 95%; font-size: 1.0rem; border-collapse: separate; border-spacing: 0px 1px; margin:2%; padding: 0 3%; } table.tab01 img{ margin:0; } table.tab01 th { font-weight: 500; padding: 8px 0; padding-left:5px; vertical-align: middle; text-align: left; border-bottom: #999 1px solid; /*border-bottom: #999 1px solid; color: #fff;*/ } table.tab01 td { padding: 8px 2%; text-align: left; border-bottom: #09437c 2px solid; } table.tab01 td.r1 { width: 20%; text-align: left; } table.tab01 td.r2 { width: 75%; text-align: left; } /* --- #w_about .nameArea .imgArea:before { position:absolute; top:10px; right:20px; left:20px; bottom:10px; content:""; border-top:#fefefe 1px solid; border-bottom:#fefefe 1px solid;z-index:2; } #w_about .nameArea .imgArea:after { position:absolute; top:20px; right:10px; left:10px; bottom:20px; content:""; border-right:#fefefe 1px solid; border-left:#fefefe 1px solid;z-index:2; } #w_about .nameArea .imgArea:after { position:absolute; top:50px; right:10px; left:10px; bottom:10px; content:""; border-right:#fefefe 1px solid; border-left:#fefefe 1px solid;z-index:2; } --- */ /* .txtArea */ #w_about .nameArea .txtArea {float:right;width: 100%;text-align:left;} #w_about .nameArea .txtArea .txtBox {margin:0 auto;max-width: 100%;} #w_about .nameArea .txtArea h4 { font-size: 30px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝",Verdana, serif; font-weight:normal; letter-spacing: 1px; line-height: 1.6; text-align:center; margin-bottom:25px; padding-bottom:20px; position:relative; z-index:2; } #w_about .nameArea .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; } #w_about .nameArea .txtArea h4:after { position:absolute; bottom:0; left:50%; width:50px; height:0; margin-left:-25px; content:""; border-top:#ddd double; z-index:-1; } #w_about .nameArea .txtArea p {font-size: 17px;line-height: 2.1;letter-spacing: 2px;} #w_about .nameArea .sign { margin-top:30px; width:100%; height:65px; background:url(../images/about/sign.png) center right no-repeat; } @media only screen and (max-width: 1024px) { #w_about .nameArea .txtArea p {font-size: 13px; line-height: 2.2; letter-spacing: 1px;} } @media only screen and (max-width: 800px) { #w_about { padding: 60px 5% 80px;} #w_about h3 { margin: 0 auto; font-size: 20px;} /* --- .nameArea --- */ #w_about .nameArea { margin: 70px 0 0; } /* --- .inner --- */ #w_about .nameArea .inner { padding:60px 6%; } #w_about .nameArea .inner2 { padding:60px 6%; } /* .imgArea */ #w_about .nameArea .imgArea { width:40%; } /* .txtArea */ #w_about .nameArea .txtArea { width:55%;} #w_about .nameArea .txtArea h4 { font-size: 25px; margin-bottom:20px; margin-top:-5px; padding-bottom:15px; } #w_about .nameArea .txtArea h4 b { font-size:14px; } #w_about .nameArea .sign { margin-top:25px; width:100%; height:58px; background-size:150px 58px;} #w_about .nameArea .imgArea2 .c-dlist_m { width: 98%; float:left; padding: 40px 1.5% 0; margin: 5% 1%; margin-bottom: 30px; } } @media only screen and (max-width: 738px) { #w_about { padding: 50px 5% 70px;} #w_about h3 { font-size: 18px; letter-spacing: 2px; line-height: 1.8; } /* --- .conceptArea --- */ #w_about .descriptionArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; } #w_about .descriptionArea p { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-top: 1em; } #w_about .descriptionArea p br { display:none; } /* --- .nameArea --- */ #w_about .nameArea { margin: 60px 0 0; } /* --- .inner --- */ #w_about .nameArea .inner { padding:50px 7.5%; } #w_about .nameArea .inner2 { padding:50px 7.5%; } /* .imgArea */ #w_about .nameArea .imgArea { float:none; width:60%; margin:0 auto; } #w_about .nameArea .imgArea:before { top:5px; right:15px; left:15px; bottom:5px;} #w_about .nameArea .imgArea:after { top:15px; right:5px; left:5px; bottom:15px; } /* .txtArea */ #w_about .nameArea .txtArea { float:none; width:100%; margin-top:30px; } #w_about .nameArea .txtArea .txtBox { max-width:1000px; padding:0 2.5%; } #w_about .nameArea .txtArea h4 { font-size: 20px; } #w_about .nameArea .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; } #w_about .nameArea .txtArea p {font-size: 12px; line-height: 2; letter-spacing: 1px;} #w_about .nameArea .sign { margin-top:10px; width:100%; height:39px; background-size:100px 39px;} } @media only screen and (max-width: 500px) { #w_about .nameArea .imgArea { float:none; width:90%; margin:0 auto; } #w_about .nameArea .imgArea2 img{ float:left; width:50%; padding:1%; } #w_about .nameArea .imgArea2 .c-dlist_m > p {font-size:16px; } #w_about .nameArea .imgArea2 .c-dlist_m > p:after{ position: absolute; content: ''; width: 30%; height: 1px; left: 35%; right: 35%; margin: 5px 0 10px; display: block; background: #333; } #w_about .nameArea .imgArea2 .c-dlist_m > dt { width: 100%; position: inherit; padding: 20px 0 0px 0em; -webkit-box-sizing: border-box; box-sizing: border-box; } #w_about .nameArea .imgArea2 .c-dlist_m > dd { padding: 0px 1em 8px 0em; text-align: right; border-top: none; border-bottom: 1px solid #e5e5e5; } #w_about .nameArea .imgArea2 .c-dlist_m > dt:first-child + dd { border-top: none; } #w_about .nameArea .imgArea2 .c-dlist_m > dd:last-child { border-bottom: none; } } @media only screen and (max-width: 414px) { #w_about {padding: 10px 5% 60px;} #w_about h3 { font-size: 15px; letter-spacing: 2px; line-height: 1.8; text-align: center; } #w_about .descriptionArea p { font-size: 12px;} /* --- .nameArea --- */ #w_about .nameArea {margin: 20px 0 0;} #w_about .nameArea .txtArea h4 b { font-size:13px; } } /* ----------------------------------------------------------- #w_about2 ----------------------------------------------------------- */ #w_about2 { padding: 70px 5% 90px; position: relative; z-index: 1; text-align: center; overflow: auto} #w_about2 h3 { margin: 0 auto; font-size: 25px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; letter-spacing: 2.5px; line-height: 1.8; text-align: center; } /* --- .conceptArea --- */ #w_about2 .descriptionArea { margin-top: 20px; position: relative; z-index: 1; margin: 20px auto 0; } #w_about2 .descriptionArea p {font-size: 14px;line-height: 2.4;letter-spacing: 2px;margin-top: 1em;text-align: left;} /* --- .nameArea --- */ #w_about2 .nameArea2 {margin: 40px 0 0px;position: relative;z-index: 2;width: 50%;float: left;} #w_about2 .nameArea2:before {position: absolute;top: 7px;left: 0;bottom: 7px;right:0;content: "";/* border: #ddd 1px solid; */background: #fefefe;z-index: -2;} #w_about2 .nameArea2:after {position: absolute;top: 0;left: 7px;bottom: 0;right:7px;content: "";border: #ddd 1px solid;z-index: -2;} /* --- .inner --- */ #w_about2 .nameArea2 .inner {padding: 20px 5%;} /* .imgArea */ #w_about2 .nameArea2 .imgArea {float:left;width: 50%;position:relative;z-index:1;} /* --- アールヌーボ 写真 æž  #w_about .nameArea2 .imgArea:before { position:absolute; top:10px; right:20px; left:20px; bottom:10px; content:""; border-top:#fefefe 1px solid; border-bottom:#fefefe 1px solid;z-index:2; } #w_about .nameArea2 .imgArea:after { position:absolute; top:20px; right:10px; left:10px; bottom:20px; content:""; border-right:#fefefe 1px solid; border-left:#fefefe 1px solid;z-index:2; } #w_about .nameArea2 .imgArea:after { position:absolute; top:50px; right:10px; left:10px; bottom:10px; content:""; border-right:#fefefe 1px solid; border-left:#fefefe 1px solid;z-index:2; } --- */ /* .txtArea */ #w_about2 .nameArea2 .txtArea {float:right;width: 45%;text-align:left;} #w_about2 .nameArea2 .txtArea .txtBox { margin:0 auto; max-width:450px; } #w_about2 .nameArea2 .txtArea h4 {font-size: 19px;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif;font-weight:normal;letter-spacing: 1px;line-height: 1.6;text-align:center;margin-bottom:25px;padding-bottom:20px;position:relative;z-index:2;} #w_about2 .nameArea2 .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; } #w_about2 .nameArea2 .txtArea h4:after { position:absolute; bottom:0; left:50%; width:50px; height:0; margin-left:-25px; content:""; border-top:#ddd double; z-index:-1; } #w_about2 .nameArea2 .txtArea p {font-size: 14px;line-height: 2.2;letter-spacing: 2px;} #w_about2 .nameArea2 .sign { margin-top:30px; width:100%; height:65px; background:url(../images/about/sign.png) center right no-repeat; } @media only screen and (max-width: 1024px) { #w_about2 .nameArea2 .txtArea p {font-size: 13px; line-height: 2.2; letter-spacing: 1px;} } @media only screen and (max-width: 800px) { #w_about2 { padding: 60px 5% 80px;} #w_about2 h3 { margin: 0 auto; font-size: 20px;} /* --- .nameArea --- */ #w_about2 .nameArea2 {margin: 70px 0 0;width: 100%;} /* --- .inner --- */ #w_about2 .nameArea2 .inner { padding:60px 6%; } /* .imgArea */ #w_about2 .nameArea2 .imgArea { width:40%; } /* .txtArea */ #w_about2 .nameArea2 .txtArea { width:55%;} #w_about2 .nameArea2 .txtArea h4 { font-size: 25px; margin-bottom:20px; margin-top:-5px; padding-bottom:15px; } #w_about2 .nameArea2 .txtArea h4 b { font-size:14px; } #w_about2 .nameArea2 .sign { margin-top:25px; width:100%; height:58px; background-size:150px 58px;} } @media only screen and (max-width: 738px) { #w_about2 { padding: 50px 5% 70px;} #w_about2 h3 { font-size: 18px; letter-spacing: 2px; line-height: 1.8; } /* --- .conceptArea --- */ #w_about2 .descriptionArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; } #w_about2 .descriptionArea p { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-top: 1em; } #w_about2 .descriptionArea p br { display:none; } /* --- .nameArea --- */ #w_about2 .nameArea2 { margin: 60px 0 0; } /* --- .inner --- */ #w_about2 .nameArea2 .inner { padding:50px 7.5%; } /* .imgArea */ #w_about2 .nameArea2 .imgArea { float:none; width:60%; margin:0 auto; } #w_about2 .nameArea2 .imgArea:before { top:5px; right:15px; left:15px; bottom:5px;} #w_about2 .nameArea2 .imgArea:after { top:15px; right:5px; left:5px; bottom:15px; } /* .txtArea */ #w_about2 .nameArea2 .txtArea { float:none; width:100%; margin-top:30px; } #w_about2 .nameArea2 .txtArea .txtBox { max-width:1000px; padding:0 2.5%; } #w_about2 .nameArea2 .txtArea h4 { font-size: 20px; } #w_about2 .nameArea2 .txtArea h4 b { display:block; font-size:15px; font-weight:normal; vertical-align:0; } #w_about2 .nameArea2 .txtArea p {font-size: 12px; line-height: 2; letter-spacing: 1px;} #w_about2 .nameArea2 .sign { margin-top:10px; width:100%; height:39px; background-size:100px 39px;} } @media only screen and (max-width: 414px) { #w_about2 { padding: 40px 5% 60px;} #w_about2 h3 { font-size: 15px; letter-spacing: 2px; line-height: 1.8; text-align: center; } #w_about2 .descriptionArea p { font-size: 12px;} /* --- .nameArea --- */ #w_about2 .nameArea2 { margin: 50px 0 0; } #w_about2 .nameArea2 .txtArea h4 b { font-size:13px; } } /* ----------------------------------------------------------- #w_about_awardSlider ----------------------------------------------------------- */ #w_about_awardSlider {padding: 90px 5%;position: relative;z-index: 1;border-top: #ededed 1px solid;} #w_about_awardSlider:before { position: absolute; top: -1px; left: 5%; right: 5%; height: 0; content: ""; border-top: #ededed 1px solid; z-index: 2; } @media only screen and (max-width: 800px) { #w_about_awardSlider { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #w_about_awardSlider { padding: 70px 0; } } @media only screen and (max-width: 414px) { #w_about_awardSlider { padding: 60px 0; } } /* --- .awardSlider --- */ .awardSlider { } .awardSlider_slide {border: 10px solid transparent;border-width: 0 1px; position:relative; z-index:1;} .awardSlider_slide img { display: block; width:auto; height: 480px; } /* .txtArea */ .awardSlider .txtArea { position:absolute; bottom:5px; left:5px;z-index:2; padding:10px; background:#fefefe; } .awardSlider .txtArea h4 { font-size:12px; font-weight:500; line-height:1.7; letter-spacing:0.5px; } .awardSlider .txtArea h4 br { display: none;} /* Arrow */ .awardSlider .slick-prev, .awardSlider .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 60px; height: 60px; padding: 0; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: #111; border: #ddd 1px solid; border:none; background:#fefefe; outline: none;/* background: none; */-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 2; } .awardSlider .slick-prev:before, .awardSlider .slick-next:before { font-family: 'themify'; font-size: 12px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .awardSlider .slick-prev { left: 5%; margin-left: -30px;left: 0; margin-left: -30px; } .awardSlider .slick-prev:before { content: "\e64a"; } .awardSlider .slick-next { right: 5%; margin-right: -30px; right:0; } .awardSlider .slick-next:before { content: "\e649"; } /* DOTS */ .awardSlider .slick-dots { bottom: -40px; } /* .linkArea */ #w_about_awardSlider .linkArea { margin-top:90px; } @media only screen and (max-width: 800px) { #w_about_awardSlider .linkArea { margin-top: 80px; } } @media only screen and (max-width: 738px) { .awardSlider_slide img { height: 250px; } /* .txtArea */ .awardSlider .txtArea { position: static; padding:10px 10px 0; background:#fefefe; } .awardSlider .txtArea h4 { font-size:12px; font-weight:500; line-height:1.7; letter-spacing:0.5px; } .awardSlider .txtArea h4 br { display: block;} .awardSlider .slick-dots { bottom: -35px; } #w_about_awardSlider .linkArea { margin-top: 70px; } } @media only screen and (max-width: 414px) { .awardSlider_slide img { height: 200px; } #w_about_awardSlider .linkArea { margin-top: 60px; } } /* ----------------------------------------------------------- #w_about_award ----------------------------------------------------------- */ #w_about_award { padding: 0 5% 90px; position: relative; z-index: 1; } @media only screen and (max-width: 800px) { #w_about_award { padding: 0 5% 80px; } } @media only screen and (max-width: 738px) { #w_about_award { padding: 0 5% 70px; } } @media only screen and (max-width: 414px) { #w_about_award { padding: 0 5% 60px; } } /* --- #sidenavWrapper --- */ #w_about_award .awardArea {position:relative; margin-top:80px; padding-top:80px; border-top:#ddd 1px dotted; z-index:1;} #w_about_award .awardArea:first-child { border-top:none; padding-top:0; } /* --- .navPlan --- */ #w_about_award .infoArea { float: left; width:30%; min-width: 250px; } /*#w_about_award .infoArea.is_stuck{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} */ @media only screen and (max-width: 800px) { #w_about_award .awardArea{margin-top:70px; padding-top:70px;} #w_about_award .infoArea { float:none; width:100%; text-align:center; } } @media only screen and (max-width: 738px) { #w_about_award .awardArea{ margin-top:60px; padding-top:60px;} } @media only screen and (max-width: 414px) { #w_about_award .awardArea { margin-top:50px; padding-top:50px;} } /* dl.title */ #w_about_award dl.title {} #w_about_award dl.title dt { float:left;clear:left;width:70px;} #w_about_award dl.title dt span { display:block; width:50px; height:50px; font-size:18px; font-weight:normal; line-height:50px; text-align:center; letter-spacing:1px;position:relative; z-index:3; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; color:#fefefe; background:#111; } #w_about_award dl.title dt span i { line-height:52px; } #w_about_award dl.title dd { margin-left:70px; padding-top:5px; font-size:20px; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ï¼­ï¼³ Ｐ明朝", "ï¼­ï¼³ 明朝", Verdana, serif; letter-spacing: 1px; line-height: 1.75;} #w_about_award dl.title dd b { text-indent:-0.5em; font-size:23px; font-weight:bold; display:block; } /* .illust */ #w_about_award .infoArea .illust { margin-top:20px; width:150px; height:265px; background:url(../images/photography/illust.jpg) center center no-repeat; background-size:150px 265px; } /* --- table --- */ #w_about_award .infoArea table { margin-left:70px; border-collapse: separate; text-align: left; font-size: 13px; letter-spacing: 1px; line-height: 1.8;} .separate{border-collapse: separate;} #w_about_award .infoArea table tr { } #w_about_award .infoArea table th { display:block; width:100%; margin-top:10px; color:#7eccd6; color:#aaa; font-size:12px; font-family: 'Catamaran', sans-serif; font-weight:500; letter-spacing:1.5px;} #w_about_award .infoArea table td { display:block; width:100%;} @media only screen and (max-width: 1050px) { #w_about_award dl.title dd { font-size:18px; line-height: 1.75;} #w_about_award dl.title dd b { text-indent:-0.5em; font-size:20px; font-weight:bold; } } @media only screen and (max-width: 950px) { #w_about_award dl.title dd { margin-left:65px; line-height: 1.75;} #w_about_award dl.title dd b { text-indent:-0.5em; font-size:18px; font-weight:bold; } } @media only screen and (max-width: 800px) { #w_about_award dl.title dt { float:none; width:50px; margin:0 auto;} #w_about_award dl.title dd { margin:20px 0 0; padding-top:0; } /* --- table --- */ #w_about_award .infoArea table { margin-left:0; text-align: center; width:100%;} #w_about_award .infoArea table tr, #w_about_award .infoArea table th, #w_about_award .infoArea table td { text-align: center;} } @media only screen and (max-width: 738px) { #w_about_award dl.title dd { margin:15px 0 0; font-size:16px; line-height: 1.8;} #w_about_award dl.title dd b { text-indent:-0.5em; font-size:16px; } } /* --- .contentGallery --- */ #w_about_award .contentGallery { float:right; margin-top:-80px; width:65%;max-width: -webkit-calc(100% - 310px);max-width: calc(100% - 310px);} @media only screen and (max-width: 1024px) { #w_about_award .contentGallery { max-width: -webkit-calc(100% - 280px); max-width: calc(100% - 280px);} } @media only screen and (max-width: 800px) { #w_about_award .contentGallery { float:none; width:100%;max-width:100%; margin-top:0;} } /* --- .contentBox --- */ #w_about_award .contentBox { margin-top:0; text-align: center; } /* .verticalL */ #w_about_award .verticalL { width:60%; margin:80px auto 0; } #w_about_award .contentBox .imgArea { margin-top:80px; position:relative; z-index:1; } @media only screen and (max-width: 800px) { #w_about_award .verticalL { width:100%; } #w_about_award .contentBox .imgArea { margin-top:50px; } } @media only screen and (max-width: 738px) { #w_about_award .contentBox .imgArea { margin-top:40px; } } @media only screen and (max-width: 738px) { #w_about_award .contentBox .imgArea { margin-top:30px; } } /* ----------------------------------------------------------- #w_about_company ----------------------------------------------------------- */ #w_about_company {padding: 50px 5%;position: relative;z-index: 1;} @media only screen and (max-width: 800px) { #w_about_company { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #w_about_company{ padding: 70px 5%; } } @media only screen and (max-width: 414px) { #w_about_company { padding: 60px 5%; } } /* .imgArea */ #w_about_company .imgArea { float:left; width:30%; } #w_about_company .imgArea .inner { position:relative; z-index:2; } #w_about_company .imgArea .inner:before { position: absolute; top: 7px; left: 0; bottom: 7px; right:0; content: ""; border: #ddd 1px solid; background:#fefefe;z-index: -2; } #w_about_company .imgArea .inner:after { position: absolute; top: 0; left: 7px; bottom: 0; right:7px; content: ""; border: #ddd 1px dotted; z-index: -2; } /* .txtArea */ #w_about_company .txtArea { float:right; width:65%; } /* ======== table.tableOther ======== */ table.company {border-collapse: collapse;text-align: left;font-size:14px;letter-spacing:1px;line-height:2; width:100%;} table.company tr { } table.company th {width:25%;padding:22px;vertical-align: 0;border-bottom: #ddd 3px solid;/* border-right:#ddd 1px dashed; *//* border-right: #ddd 1px solid; */} table.company td {padding:22px;vertical-align: 0;border-bottom: #ddd 3px solid;border-left:none;} table.company td .linkArea {margin-top:10px;text-align:left;} table.company td .linkArea a.btn {margin:0;} /* --- #map_canvas --- */ #map_canvas { width:100%; margin-top:70px; height:400px;position: relative; z-index: 1; border: #ededed 1px solid;} @media only screen and (max-width: 950px) { table.company th {width:30%;padding:20px;} table.company td {padding:20px;} } @media only screen and (max-width: 800px) { table.company { font-size:13px;} } @media only screen and (max-width: 738px) { #w_about_company .imgArea { float:none; width:100%; } #w_about_company .txtArea { float:none; width:100%; margin-top:25px; } table.company { font-size:12px;} /* #map_canvas { display:none; }*/ } @media only screen and (max-width: 414px) { table.company th {width:30%;padding:15px;} table.company td {padding:15px;} } /* ----------------------------------------------------------- #w_about_volunteer ----------------------------------------------------------- */ #w_about_volunteer { padding: 90px 5%; position: relative; z-index: 1; } @media only screen and (max-width: 800px) { #w_about_volunteery { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #w_about_volunteer{ padding: 70px 5%; } } @media only screen and (max-width: 414px) { #w_about_volunteer { padding: 60px 5%; } } /* .imgArea */ #w_about_volunteer .imgArea {float:left;width: 50%;} #w_about_volunteer .imgArea .inner { position:relative; z-index:2; } #w_about_volunteer .imgArea .inner:before { position: absolute; top: 7px; left: 0; bottom: 7px; right:0; content: ""; border: #ddd 1px solid; background:#fefefe;z-index: -2; } #w_about_volunteer .imgArea .inner:after { position: absolute; top: 0; left: 7px; bottom: 0; right:7px; content: ""; border: #ddd 1px dotted; z-index: -2; } /* .txtArea */ #w_about_volunteer .txtArea {float:right;width: 48%;} #w_about_volunteer .txtArea h2{ color: #999; text-align: center; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 5px} #w_about_volunteer .txtArea p {font-size: 16px; border-radius: 5px; border: solid 1px #999; padding: 10px; margin-top: 20px; } .txt_c{ text-align: center; } @media only screen and (max-width: 950px) { table.volunteer th {width:30%;padding:20px;} table.volunteer td {padding:20px;} } @media only screen and (max-width: 800px) { table.volunteer { font-size:13px;} } @media only screen and (max-width: 738px) { #w_about_volunteer .imgArea { float:none; width:100%; } #w_about_volunteer .txtArea { float:none; width:100%; margin-top:25px; } table.volunteer { font-size:12px;} /* #map_canvas { display:none; }*/ } @media only screen and (max-width: 414px) { table.volunteer th {width:30%;padding:15px;} table.volunteer td {padding:15px;} }