/* CSS Document */ .main-bg{ padding-top: 72px; padding-bottom: 58px; background: url(../../img/case/main-bg.jpg) no-repeat center top / cover; } .main-bg .text{ width: 100%; color: #fff; } .main-bg .text .ttl{ font-size: 35px; line-height: 1; font-weight: 700; letter-spacing: 0.1em; } .main-bg .text .ttl .mini-text{ font-size: 17px; line-height: 1.64; display: block; margin-top: 20px; font-weight: 500; letter-spacing: 0.1em; } .case-cont .pankuzu li a{ color: #1d1d1d; } .case-cont{ padding-top: 15px; padding-bottom: 80px; background: #e4e1d0; } .category-link{ margin-top: 45px; display: flex; } .category-link ul{ font-size: 0; } .category-link li{ display: inline-block; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; } .category-link li:last-child{ margin-right: 0; } .category-link li a{ display: inline-block; padding: 11px 22px; font-size: 15px; border-radius: 20px; background:#59a1d9 ; line-height: 1; color: #fff; } .category-link li a.current{ background: #0d2e9b; } .cat-ttlbox{ margin-top: 55px; text-align: center; margin-bottom: 25px; } .cat-ttl{ line-height: 1; color: #0d2e9b; font-size: 35px; letter-spacing: 0.1em; } .cat-tex{ line-height: 1.64; color: #0d2e9b; font-size: 17px; font-weight: 500; display: block; word-break: break-all; margin-top: 20px; letter-spacing: 0.1em; } /*詳細ページ用*/ .main-bg.ex{ height: 240px; } .contents-bg{ background: #fff; padding-top: 15px; padding-bottom: 110px; margin-bottom: -190px; bottom: 190px; position: relative; } .contents-bg .head-box{ width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; } .contents-bg .pankuzu{ margin-bottom: 54px; } .contents-bg .ttl-flex{ display: flex; justify-content: space-between; margin-bottom: 27px; align-items: center; } .contents-bg .ttl-flex .left{ font-size: 20px; line-height: 1; color: #0d2e9b; width: 14%; padding-right: 1%; font-weight: 700; } .contents-bg .ttl-flex .right{ width: 80%; padding-left: 5%; border-left: 2px solid #59a1d9; } .contents-bg .ttl-flex .right h1{ font-size: 27px; line-height: 1.51; color: #0d2e9b; font-weight: 700; margin-bottom: 10px; } .contents-bg .ttl-flex .right .day-text{ color: #808080; font-size: 12px; line-height: 1.33; } .contents-bg .img-box{ display: block; position: relative; } .contents-bg .img-box .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 22px 27px; color: #fff; background: #a20017; line-height: 1.46; font-size: 15px; text-align: center; } .contents-bg .miniimg-box{ width: 90%; max-width: 532px; margin-left: auto; margin-right: auto; position: relative; margin-bottom: 50px; } .contents-bg .miniimg-box .ex-tex{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; color: #a20017; line-height: 1; font-size: 14px; } .contents-bg .miniimg-box .icon{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; width: 54px; } .contents-bg .contents-box{ width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; padding-top: 10px; } .contents-bg .contents-box .pankuzu{ margin-bottom: 60px; } .contents-bg .contents-box .ttl-text{ line-height: 1.51; color: #2282cc; font-size: 27px; margin-bottom: 10px; } .contents-bg .contents-box .day-text{ color: #808080; font-size: 12px; line-height: 1.33; margin-bottom: 24px; } .contents-bg .contents-box .img-box{ margin-bottom: 50px; position: relative; } .contents-bg .contents-box .head-text{ font-size: 15px; line-height: 1.86; font-weight: 700; } .contents-bg .main-imgbox{ margin-bottom: 115px; } .contents-bg .contents-box h2{ margin-bottom: 54px; text-align: center; line-height: 1; padding-top: 10px; padding-bottom: 10px; background:#0d2e9b ; color: #fff; font-size: 20px; } .contents-bg .contents-box h3{ line-height: 1.47; margin-bottom: 25px; padding-bottom: 12px; border-bottom: 1px solid #2282cc; font-size:26px; color: #2282cc; } .contents-bg .contents-box p{ margin-bottom: 50px; font-size: 15px; line-height: 1.86; } .contents-bg .contents-box .tex-box{ margin-bottom: 110px; } .contents-bg .contents-box .tex-box.index0{ margin-bottom: 30px; } .contents-bg .contents-box p.big{ font-size: 17px; } .contents-bg .contents-box p .notes{ font-size: 12px; } .contents-bg .contents-box p.caption{ font-size: 12px; line-height: 1.58; margin-bottom: 0; padding-top: 0!important; } .contents-bg .contents-box p .bold{ font-weight: 700; } .contents-bg .contents-box p a{ color: #2282cc; text-decoration: underline; } .contents-bg .contents-box .link{ color: #2282cc; text-decoration: underline; display: block; } .contents-bg .contents-box .link .icon{ width: 20px; display: inline-block; margin-left: 3px; vertical-align: middle;; } .contents-bg .contents-box .link .icon img{ display: block; } .contents-bg .contents-box a .icon{ width: 20px; display: inline-block; margin-left: 3px; vertical-align: middle;; } .contents-bg .contents-box a .icon img{ display: block; } .contents-bg .contents-box .link::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 8px; height: 8px; border-top: 2px solid #2282cc; border-right: 2px solid #2282cc; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 5px; } .name-obi{ padding: 20px 34px; background: #59a1d9; } .name-obi p{ color: #fff; font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; } .name-obi .mini{ display: inline-block; font-size: 14px; margin-left: 14px; font-weight: 500; vertical-align: middle; letter-spacing: 0; } .name-obi .link-tex{ color: #fff; display: inline-block; font-size: 14px; margin-left: 42px; font-weight: 500; vertical-align: middle; letter-spacing: 0; } .name-obi .link-tex .icon{ width: 12px; display: inline-block; margin-left: 15px; } .bottom-inlist{ padding-top: 50px; border-top: 1px solid #8e8f8f; margin-bottom: 110px; } .bottom-inlist li{ display: flex; justify-content: space-between; margin-bottom: 23px; } .bottom-inlist li:last-child{ margin-bottom: 0; } .bottom-inlist li .pic{ width: 10%; } .bottom-inlist li .textbox{ width: 86%; } .bottom-inlist li .textbox .ttl{ margin-bottom: 0; font-size: 13px; font-weight: 700; } .bottom-inlist li .textbox .text{ margin-bottom: 0; font-size: 12px; line-height: 1.9; } .shere-list{ text-align: right; } .shere-list li{ display: inline-block; width: 40px; margin-right: 18px; line-height: 1; vertical-align: middle; } .shere-list li.text{ width: 150px; margin-right: 14px; } .shere-list li:last-child{ margin-right: 0; } .kanren-slide{ margin-top: 44px; } .caseflex-box{ display: flex; justify-content: space-between; margin-bottom: 45px; } .caseflex-box .box{ width: 48%; } .caseflex-box .box.col3{ width: 31%; } .subimg-box{ margin-bottom: 12px; } .movie-wrap{ margin-top: 114px; } .movie-wrap .movie-ttl{ font-size: 26px; line-height: 1; font-weight: 700; color: #0d2e9b; padding-bottom: 14px; border-bottom: 1px solid #0d2e9b; } .movie-list{ display: flex; flex-wrap: wrap; } .movie-list li{ width: 49%; margin-right: 2%; margin-top: 30px; } .movie-list li:nth-child(2n){ margin-right: 0; } .movie-list li .movie-flex{ display: flex; justify-content: space-between; align-items: flex-start; } .movie-list li .movie-flex .pic{ position: relative; width: 49%; } .movie-list li .movie-flex .pic .icon{ position: absolute; /*上下左右中央配置*/ top: 50%; left: 50%; width: 40px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .movie-list li .movie-flex .text{ width: 48%; } .movie-list li .movie-flex .text .ttl{ font-size: 14px; color: #1d1d1d; line-height: 1.7; } .movie-list li .movie-flex .text .name{ font-size: 12px; color: #0d2e9b; font-weight: 700; line-height: 1.75; margin-bottom: 10px; } .item-list{ margin-bottom: 120px; } .item-list li{ margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid #8e8f8f; display: flex; justify-content: space-between; } .item-list li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .item-list li .pic{ width: 35%; } .item-list li .textbox{ width: 59.5%; padding-top: 26px; text-align: justify; } .item-list li p.name{ padding-left: 1em; text-indent: -1em; font-size: 19px; margin-bottom: 15px; } .item-list li p.name a{ color: #0d2e9b; font-weight: 700; text-decoration: none; } .item-list li p.name::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #0d2e9b; border-right: 2px solid #0d2e9b; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 10px; } .item-list li p.info{ font-size: 15px; line-height: 1.86; } .item-list li p.item{ padding-left: 1em; text-indent: -1em; font-size: 15px; margin-bottom: 25px; } .item-list li p.item a{ color: #0d2e9b; font-weight: 700; text-decoration: none; } .item-list li p.item::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #0d2e9b; border-right: 2px solid #0d2e9b; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; margin-right: 10px; } .contents-bg .contents-box .mokuji-box{ margin-bottom: 110px; } .contents-bg .contents-box .mokuji-ttl{ margin-bottom: 20px; font-weight: 700; font-size: 21px; line-height: 1.2; color: #1a1311; } .contents-bg .contents-box .mokuji-box ul li{ margin-bottom: 2px; max-width: 500px; } .contents-bg .contents-box .mokuji-box ul li:last-child{ margin-bottom: 0; } .contents-bg .contents-box .mokuji-box ul li a{ padding: 10px 40px 10px 18px; display: block; font-size: 15px; background: #deecf7; width: 100%; line-height: 1.53; color: #1d1d1d; position: relative; } .contents-bg .contents-box .mokuji-box ul li a .sankaku{ width: 8px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .contents-bg .contents-box .mokuji-box ul li a .sankaku img{ display: block; } .case-cont.del{ padding-bottom: 0; } .case-cont.plus{ padding-top: 1px; padding-bottom: 80px; } @media print, screen and (min-width : 1367px) { } @media print, screen and (max-width: 900px) { .main-bg{ padding-top: 9.66vw; padding-bottom: 8.45vw; background: url(../../img/case/main-bg-sp.jpg) no-repeat center top / cover; } .main-bg .text .ttl{ font-size: 5.7vw; line-height: 1; } .main-bg .text .ttl .mini-text{ font-size: 3.6vw; line-height: 1.64; display: block; margin-top: 2vw; font-weight: 500; } .case-cont{ padding-top: 7.25vw; padding-bottom: 9.66vw; } .category-link{ margin-top: 0; display: flex; } .category-link ul{ font-size: 0; } .category-link li{ display: inline-block; margin-right: 2.4vw; margin-top: 0; margin-bottom: 2.4vw; } .category-link li:last-child{ margin-right: 0; } .category-link li a{ display: inline-block; padding: 2.4vw 4.7vw; font-size: 3.1vw; border-radius: 4vw; } .cat-ttlbox{ margin-top: 7.26vw; text-align: center; margin-bottom: 7.25vw; } .cat-ttl{ line-height: 1; font-size: 7.2vw; letter-spacing: 0.01em; } .cat-tex{ line-height: 1.64; font-size: 3.8vw; word-break: break-all; margin-top: 4.83vw; } #content.cat-list{ margin-top: 2.4vw; } /*詳細ページ用*/ .main-bg.ex{ height: 38.6vw; } .contents-bg{ padding-top: 7.25vw; padding-bottom: 14.49vw; margin-bottom: -41.8vw; bottom: 41.8vw; position: relative; } .contents-bg .head-box{ width: 100%; margin-left: auto; margin-right: auto; max-width:none; } .contents-bg .ttl-flex{ display: block; width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 4.83vw; } .contents-bg .ttl-flex .left{ font-size: 4.1vw; line-height: 1; width: 100%; padding-right: 0%; font-weight: 700; position: relative; margin-bottom: 7.25vw; } .contents-bg .ttl-flex .left::after{ position: absolute; content: ""; width: 100%; border-top: 1px solid #0d2e9b; height: 1px; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 1; } .contents-bg .ttl-flex .left p{ display: inline-block; background: #fff; padding-right: 2vw; position: relative; z-index: 2; } .contents-bg .ttl-flex .right{ width: 100%; padding-left:0%; border-left: 0; } .contents-bg .ttl-flex .right h1{ font-size: 5vw; line-height: 1.51; font-weight: 700; margin-bottom: 2.4vw; } .contents-bg .ttl-flex .right .day-text{ font-size: 3vw; /*2.6vw → 3vw 竹内修正 */ line-height: 1.33; } .contents-bg .img-box{ display: block; position: relative; } .contents-bg .img-box .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 3vw 3vw; line-height: 1; font-size: 2.7vw; } .contents-bg .miniimg-box{ width: 100%; max-width: none; margin-left: auto; margin-right: auto; position: relative; margin-bottom: 9.66vw; } .contents-bg .miniimg-box .ex-tex{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; color: #a20017; line-height: 1; font-size: 3.6vw; } .contents-bg .miniimg-box .icon{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; width: 12vw; } .contents-bg .contents-box{ width: 90%; max-width:none; margin-left: auto; margin-right: auto; padding-top: 0vw; } .contents-bg .contents-box .ttl-text{ line-height: 1.51; font-size:5.07vw; margin-bottom: 2.4vw; } .contents-bg .contents-box .day-text{ font-size: 3vw; /*2.6vw → 3vw 竹内修正 */ line-height: 1.33; margin-bottom: 4.83vw; } .contents-bg .contents-box .img-box{ margin-bottom:7.25vw; position: relative; } .contents-bg .contents-box .head-text{ font-size: 3.86vw; line-height: 1.86; font-weight: 700; } .contents-bg .main-imgbox{ margin-bottom: 14.49vw; } .contents-bg .contents-box h2{ margin-bottom: 9.66vw; text-align: center; line-height: 1; padding-top: 2vw; padding-bottom: 2vw; font-size: 4.1vw; } .contents-bg .contents-box h3{ margin-bottom: 4vw; padding-bottom: 2.42vw; font-size:5.07vw; line-height: 1.47; } .contents-bg .contents-box p{ margin-bottom: 9.66vw; font-size:3.6vw; line-height: 1.86; } .contents-bg .contents-box .tex-box{ margin-bottom:14.49vw; } .contents-bg .contents-box p.big{ font-size:3.6vw; } .contents-bg .contents-box p .notes{ font-size: 3.0vw; } .contents-bg .contents-box p.caption{ font-size: 3vw; /*2.4vw → 3vw 竹内修正 */ line-height: 1.58; margin-bottom: 0; } .contents-bg .contents-box .link .icon{ width: 4.8vw; display: inline-block; margin-left: 1vw; } .contents-bg .contents-box .link .icon img{ display: block; } .contents-bg .contents-box a .icon{ width: 4.8vw; display: inline-block; margin-left: 1vw; } .contents-bg .contents-box a .icon img{ display: block; } .contents-bg .contents-box .link::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.44vw; height: 1.44vw; border-top: 2px solid #2282cc; border-right: 2px solid #2282cc; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 1.2vw; } .name-obi{ padding: 3.2vw 5.3vw; } .name-obi p{ font-size: 4.3vw; font-weight: 700; line-height: 1; letter-spacing: 0.05em; } .name-obi .mini{ display: block; font-size: 3vw; /* 2.8vw → 3vw 竹内修正 */ margin-left: 0px; letter-spacing: 0; margin-top: 2vw; } .name-obi .link-tex{ display: block; font-size: 3.3vw; margin-left:0; margin-top: 2vw; font-weight: 500; vertical-align: middle; letter-spacing: 0; } .name-obi .link-tex .icon{ width: 2.5vw; display: inline-block; margin-left: 2.1vw; } .bottom-inlist{ padding-top: 14.49vw; border-top: 1px solid #8e8f8f; margin-bottom: 14.49vw; } .bottom-inlist li{ display: flex; justify-content: space-between; margin-bottom: 9.66vw; } .bottom-inlist li:last-child{ margin-bottom: 0; } .bottom-inlist li .pic{ width: 25%; } .bottom-inlist li .textbox{ width: 68%; } .bottom-inlist li .textbox .ttl{ margin-bottom: 0; font-size: 3.1vw; font-weight: 700; } .bottom-inlist li .textbox .text{ margin-bottom: 0; font-size: 2.9vw; line-height: 1.9; } .shere-list{ text-align: right; margin-top: 14.49vw; } .shere-list li{ display: inline-block; width: 9.6vw; margin-right: 3.3vw; line-height: 1; vertical-align: middle; } .shere-list li.text{ width: 39vw; margin-right: 3.5vw; font-size: 3vw; } .shere-list li:last-child{ margin-right: 0; } .kanren-slide{ margin-top: 9.66vw; } .caseflex-box{ display: block; justify-content: space-between; margin-bottom: 9.66vw; } .caseflex-box .box{ width:100%; margin-bottom: 4.83vw; } .caseflex-box .box.col3{ width: 100%; } .subimg-box{ margin-bottom: 2vw; } .movie-wrap{ margin-top: 24vw; } .movie-wrap .movie-ttl{ font-size: 5vw; line-height: 1; font-weight: 700; padding-bottom: 2.4vw; } .movie-list{ display: flex; flex-wrap: wrap; } .movie-list li{ width: 100%; margin-right: 0%; margin-top: 9.66vw; } .movie-list li:nth-child(2n){ margin-right: 0; } .movie-list li .movie-flex{ display: flex; justify-content: space-between; } .movie-list li .movie-flex .pic{ position: relative; width: 49%; } .movie-list li .movie-flex .pic .icon{ position: absolute; /*上下左右中央配置*/ top: 50%; left: 50%; width: 6.8vw; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .movie-list li .movie-flex .text{ width: 48%; } .movie-list li .movie-flex .text .ttl{ font-size: 3.3vw; line-height: 1.7; } .movie-list li .movie-flex .text .name{ font-size: 2.8vw; font-weight: 700; line-height: 1.75; margin-bottom: 2.8vw; } .item-list{ margin-bottom: 14.49vw; } .item-list li{ margin-bottom: 9.66vw; padding-bottom: 9.66vw; border-bottom: 2px solid #8e8f8f; display: block; } .item-list li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .item-list li .pic{ width: 100%; } .item-list li .textbox{ width: 100%; padding-top: 4.83vw; } .item-list li p.name{ padding-left: 1em; text-indent: -1em; font-size: 4.83vw; margin-bottom:3.8vw; } .item-list li p.name::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.44vw; height: 1.44vw; border-top: 2px solid #0d2e9b; border-right: 2px solid #0d2e9b; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 1.4vw; } .item-list li p.info{ font-size: 3.6vw; line-height: 1.86; } .item-list li p.item::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.44vw; height: 1.44vw; border-top: 2px solid #0d2e9b; border-right: 2px solid #0d2e9b; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.8vw; margin-right: 1.4vw; } .slide-box:last-of-type{ margin-bottom: 0; } .contents-bg .contents-box .mokuji-box{ margin-bottom: 14.49vw; } .contents-bg .contents-box .mokuji-ttl{ margin-bottom: 2.4vw; font-weight: 700; font-size: 5vw; } .contents-bg .contents-box .mokuji-box ul li{ margin-bottom: 1vw; max-width: none; } .contents-bg .contents-box .mokuji-box ul li:last-child{ margin-bottom: 0; } .contents-bg .contents-box .mokuji-box ul li a{ padding:3.6vw 8.4vw 3.6vw 4.8vw; display: block; font-size: 3.6vw; } .contents-bg .contents-box .mokuji-box ul li a .sankaku{ width:2.4vw; position: absolute; top: 50%; right: 4.8vw; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .contents-bg .contents-box .mokuji-box ul li a .sankaku img{ display: block; } .case-cont.del{ padding-bottom: 0; } .case-cont.plus{ padding-top: 1px; padding-bottom:9.66vw; } } .youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }