@charset "utf-8"; /*■■■■■■■■■■■■■■■■■■■■■■■■■   婚活お役立ちコラム 用(/useful/フォルダ内)  ■■■■■■■■■■■■■■■■■■■■■■■■■*/ /* 全ページ */ .column-next-article { border: 1px solid #000; border-radius: 15px; margin: 0 40px 30px; } .column-next-article > p { text-align: center; padding: 1.5em 1em; } .column-next-article > p > span:first-child { display: inline-block; margin-right: 1em; } .column-next-article > p > span:first-child::after { content: ""; border-top: 0.4em solid transparent; border-left: 0.8em solid #3C3C3C; border-bottom: 0.4em solid transparent; display: inline-block; margin-left: 0.2em; } .column-next-article > p em { font-weight: bold; font-size: 1.2em; } /* */ .column-nextprev { margin: 0 40px; } .column-nextprev > ul { } .column-nextprev > ul > li { display: inline-block; vertical-align: top; width: 32%; margin-right: 2%; } .column-nextprev > ul > li:last-child { margin-right: 0; } .column-nextprev > ul > li:first-child:nth-last-child(2), .column-nextprev > ul > li:nth-child(2):last-child { width: 49%; margin-right: 2%; } .column-nextprev > ul > li:nth-child(2):last-child { margin-right: 0; } .column-nextprev > ul > li > a { background-color: #C8C8C8; border-radius: 15px; padding: 0.5em 0; text-align: center; position: relative; display: block; color: #3C3C3C; } .column-nextprev > ul > li > a:hover { background-color: #D8D8D8; text-decoration: none; } .column-nextprev > ul > li.column-nextprev-next > a::before, .column-nextprev > ul > li.column-nextprev-prev > a::after { position: absolute; top: 50%; margin-top: -0.8em; } .column-nextprev > ul > li.column-nextprev-next > a::before { content: "<"; left: 10px; } .column-nextprev > ul > li.column-nextprev-prev > a::after { content: ">"; right: 10px; } /* */ .colored { color: #8CC63F !important; } .ind { text-indent: -1em; padding-left: 1em; } .ind5 { text-indent: -7em; padding-left: 7em; } .box1 { padding: 37px 50px; background-color: #F3F9EC; border-radius: 10px; margin-bottom: 15px; } h3.in_article { margin-left: -15px; } .column_h { font-size: 13px !important; font-weight: normal !important; line-height: 1.5 !important; margin-bottom: 0px !important; } .wrap01 { width: 63.5%; float: left; } .table01 { width: 100%; } .td01 { background-color:#D7EBBD; color: #5a5a5a; font-size: 13px; padding: 10px 20px; } .td02 { background-color:#f0f0f0; color: #3c3c3c; font-size: 13px; padding: 20px; } .td03 { width: 80px; vertical-align: top; } .dib { display: inline-block; } h4.dot{ color: #4d4d4d !important; text-indent: -1em; } h4.dot:before{ content: "●"; color: #c5e29f; } /*###############################################*/ /* MEDIA QUERIES */ /*###############################################*/ @media screen and (max-width: 799px) { .smt_menu h2.smt{ font-weight: bold; font-size: 15px; } .column-next-article { margin: 0 15px 20px; } .column-next-article > p { text-align: justify; } .column-next-article > p > span:first-child { display: block; margin-right: 0; } /* */ .column-nextprev { margin: 0 15px; } /* */ .box1 { padding: 22px 25px; } /* */ .wrap01 { width: 100%; float: none; } .table01 { margin-top: -15px; } .td01 { padding: 10px; } .td02 { padding: 10px; } } /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ /* index.html */ /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ #column-index { } #column-index img { max-width: 100%; width: auto; } #column-index h3 { color: #8CC63F; font-size: 1.4em; line-height: 1.3em; font-weight: bold; } /* */ #column-index-contents { text-align: center; margin: 30px auto; } #column-index-contents span { display: inline-block; padding: 0 5px 7px; border-bottom: 2px solid #B3B3B3; } #column-index-contents span img { max-width: 100px; vertical-align: top; } /* */ #column-index00 { border-top: 1px solid #B2B2B2; border-bottom: none; } #column-index00 > a{ width: 35%; margin-right: 15px !important; padding: 0; float: left; } #column-index00 > a > img { display: block; width: 100%; } #column-index00 > div{ overflow: hidden; float: none; margin: 0; padding: 0; overflow: hidden; width: auto; } #column-index01 table { border-spacing: 0; empty-cells: show; border-collapse: collapse; table-layout: fixed; width: 100%; } #column-index01 table tr td { width: 33.3%; vertical-align: top; padding: 15px; border: 1px solid #B2B2B2; } #column-index01 table tr td a { display: block; margin: 0 auto 20px; } #column-index01 table tr td a img { width: 100%; display: block; margin: 0 auto; } /* */ div.column-index-div { border: 1px solid #B2B2B2; border-top: none; padding: 15px; overflow: hidden; } #column-index02 { } #column-index02 > a.fl.img-link { width: 45%; display: block; margin: 0 auto; } #column-index02 > a.fl.img-link > img { max-width: 100%; display: block; margin: 0 auto; } #column-index02 > div { overflow: hidden; padding-left: 15px; } #column-index02 > div > ul { margin-top: 1em; } #column-index02 > div > ul > li { width: 49%; margin-right: 2%; margin-bottom: 2%; display: inline-block; vertical-align: top; } #column-index02 > div > ul > li:nth-child(2n) { margin-right: 0; } #column-index02 > div > ul > li > a { background-color: #FBD6D8; padding: 0 1em !important; display: block; color: #F6999D; line-height: 0; font-weight: bold; border-radius: 7px; text-align: left; height: 50px; } #column-index02 > div > ul > li > a:hover { background-color: #FFE6E8; color: #FFA9AD; text-decoration: none;; } #column-index02 > div > ul > li > a span { display: inline-block; vertical-align: middle; height: auto !important; padding: 0 !important; margin: 0 !important; font-size: 14px; line-height: 1.2em; } #column-index02 > div > ul > li > a:before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 100%; } /* */ #column-index03 { } #column-index03 > div { width: 32%; margin-right: 2%; display: inline-block; vertical-align: top; } #column-index03 > div:nth-of-type(3n) { margin-right: 0; } #column-index03 > div > a.img-link { display: block; margin: 0 auto 15px; } #column-index03 > div > a.img-link img { display: block; margin: 0 auto; max-width: 100%; } #column-index03 > div > ul > li , #column-index04 > div > ul > li , #column-index05 > div > ul > li , #column-index06 > div > ul > li { padding-left: 1em; text-indent: -1em; margin-bottom: 0.5em; } #column-index03 > div > ul > li:last-child { margin-bottom: 0; } #column-index03 > div > ul > li::before , #column-index04 > div > ul > li::before , #column-index05 > div > ul > li::before , #column-index06 > div > ul > li::before { content: ""; width: 0; height: 0; border-top: 0.4em solid transparent; border-left: 0.8em solid #8CC63F; border-bottom: 0.4em solid transparent; display: inline-block; vertical-align: 0.1em; margin-right: 0.2em; } #column-index03 > div > ul > li > a , #column-index04 > div > ul > li > a , #column-index05 > div > ul > li > a , #column-index06 > div > ul > li > a { color: #5A5A5A; font-weight: bold; } #column-index04 > div, #column-index05 > div, #column-index06 > div { overflow: hidden; } #column-index04 > div img, #column-index05 > div img, #column-index06 > div img{ float: left; width: 32%; margin: 0 15px 0 0; } #column-index04 > div ul, #column-index05 > div ul, #column-index06 > div ul { margin: 10px 0 0; overflow: hidden; } #column-index04 > div > ul > li, #column-index05 > div > ul > li, #column-index06 > div > ul > li { box-sizing: border-box; width: 33.3333%; padding: 0 10px 0 1em; float: left; line-height: 1.3em; } #column-index04 > div > ul > li:nth-child(3n+1), #column-index05 > div > ul > li:nth-child(3n+1), #column-index06 > div > ul > li:nth-child(3n+1) { clear: left; } .green-box{ background: #eef7e2; padding: 20px; font-size: 120%; margin: 20px 0; } .green-box h4{ color: #8cc63f; font-weight: bold; font-size: 110%; margin: 0 0 10px; } .indent3em li{ padding-left: 3em; text-indent: -3em; margin: 0 0 5px; line-height: 1.3em; } .indent3em li em{ display: inline-block; width: 2em; font-style: normal; text-align: right; font-weight: bold; color: #8cc63f; } .green-box + p.tr{ margin-top: -10px; } .midasi.data{ position: relative; padding-left: 100px; } .midasi.data em{ position: absolute; top: 0; left: 0; box-sizing: border-box; height: 100%; background: #5a5a5a; margin: 0 0 0 -15px; padding: 10px 15px 10px 0; color: #fff; } /*###############################################*/ /* MEDIA QUERIES */ /*###############################################*/ @media screen and (max-width: 1200px) { .midasi.data{ padding-left: 90px; } .midasi.data em{ margin: 0; } } @media screen and (max-width: 1100px) { #column-index02 > a.fl.img-link { max-width: 40%; } } @media screen and (max-width: 1024px) { #column-index02 > div { overflow: visible; padding-left: 0; } #column-index02 > div > h3, #column-index02 > div > p { overflow: hidden; padding-left: 15px; } #column-index02 > div > ul { clear: both; padding-top: 1em; } #column-index04 > div > ul > li:nth-child(3n+1) , #column-index04 > div > ul > li, #column-index05 > div > ul > li:nth-child(3n+1) , #column-index05 > div > ul > li, #column-index06 > div > ul > li:nth-child(3n+1) , #column-index06 > div > ul > li { width: 50%; clear: none; } #column-index04 > div > ul > li:nth-child(2n+1), #column-index05 > div > ul > li:nth-child(2n+1), #column-index06 > div > ul > li:nth-child(2n+1) { clear: left; } } @media screen and (max-width: 799px) { #column-index { margin-bottom: 20px; } /* */ #column-index-contents { margin: 20px auto; } #column-index-contents span img { max-width: 168px; } /* */ #column-index00 > a{ display: block; width: auto; margin-right: 0 !important; float: none; } #column-index00{ padding: 10px 10px 20px; border: 0; } #column-index00 > div{ padding-top: 10px; } #column-index01 table, #column-index01 tbody, #column-index01 table tr, #column-index01 table tr th, #column-index01 table tr td { display: block; width: auto; border: none; } #column-index01 table tr td { padding: 10px 15px; } #column-index01 table tr td:first-of-type { padding-top: 0 } #column-index01 table tr td a { margin-bottom: 10px; } /* */ div.column-index-div { border: none; padding-bottom: 0; } /* */ #column-index02 > a.fl.img-link { max-width: none; width: auto; float: none; margin: 0 auto 10px; } #column-index02 > a.fl.img-link > img { width: 100%; } #column-index02 > div > h3, #column-index02 > div > p { overflow: visible; padding-left: 0; } #column-index02 > div > ul { clear: none; padding-top: 10px; } /* */ #column-index03 > div > a.img-link img { width: 100%; } #column-index03 > div:first-of-type { width: auto; margin: 0 auto 20px; display: block; } #column-index03 > div:nth-of-type(2n+2), #column-index03 > div:nth-of-type(2n+3) { width: 49%; margin-right: 2%; } #column-index03 > div:nth-of-type(2n+3) { margin-right: 0; } #column-index04 > div img, #column-index05 > div img, #column-index06 > div img{ float: none; display: block; width: 100%; margin: 0 0 10px; } .midasi.data{ padding-left: 80px; } .midasi.data em{ padding: 10px 10px 10px 0; } .green-box{ padding: 15px; } } @media screen and (max-width: 599px) { #column-index-contents { margin: 10px auto; } #column-index-contents span img { max-width: 100px; } /* */ #column-index02 > div > ul > li { width: auto; margin-right: 0; margin-bottom: 15px; display: block; } /* */ #column-index03 > div:nth-of-type(2n+2), #column-index03 > div:nth-of-type(2n+3) { width: auto; margin-right: 0; display: block; } #column-index03 > div > ul > li, #column-index03 > div > ul > li:last-child { margin-bottom: 10px; } #column-index03 > div:last-of-type > ul > li:last-child { margin-bottom: 0; } #column-index04 > div > ul > li:nth-child(2n+1) , #column-index04 > div > ul > li:nth-child(3n+1) , #column-index04 > div > ul > li, #column-index05 > div > ul > li:nth-child(2n+1) , #column-index05 > div > ul > li:nth-child(3n+1) , #column-index05 > div > ul > li, #column-index06 > div > ul > li:nth-child(2n+1) , #column-index06 > div > ul > li:nth-child(3n+1) , #column-index06 > div > ul > li { width: auto; float: none; clear: none; } .green-box{ padding: 10px; } } /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ /* /column/beginner/ */ /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ #column-beginner { margin-bottom: 20px; } #column-beginner-lists { counter-reset: counter0; } #column-beginner-lists > ol { border-bottom: 1px solid #E6E6E6; margin-top: 30px; } #column-beginner-lists > ol > li { border-top: 1px solid #E6E6E6; display: inline-block; vertical-align: top; width: 49%; padding: 15px 1% 15px 1%; overflow: hidden; } #column-beginner-lists > ol > li:nth-child(2n) { padding-right: 0; } #column-beginner-lists > ol > li:first-child, #column-beginner-lists > ol > li:nth-child(2) { padding-top: 0; border-top: none; } #column-beginner-lists > ol > li > a { display: block; overflow: hidden; } #column-beginner-lists > ol > li > a > img.fl { max-width: 35%; width: auto; display: block; } #column-beginner-lists > ol > li > a > p { overflow: hidden; color: #8BC53E; font-size: 1.3em; line-height: 1.5em; padding-left: 15px; } #column-beginner-lists > ol > li > a > p::before { background-color: #F14E55; padding: 0.35em 0.5em 0.25em; margin-bottom: 8px; width: 4em; display: block; box-sizing: content-box; color: #FFF; text-align: center; font-size: 0.75em; line-height: 1.1em; counter-increment: counter0; content: "その" counter(counter0); } #column-beginner-lists > ol > li > a:hover { text-decoration: none; } #column-beginner-lists > ol > li > a:hover > p { text-decoration: none; color: #ABE55E; } #column-beginner-lists > ol > li > a:hover > p::before { background-color: #FF6E75; } /* Q&A part */ /*-------------------------------------------------------*/ .column-beginner-qa { margin-bottom: 20px; } .column-beginner-question { padding: 15px 15px 0 80px; margin-bottom: 30px; position: relative; min-height: 50px; } .column-beginner-question::before { background-color: #8BC53E; content: "Q"; font-family: "ヒラギノ明朝 Pro W4", "Hiragino Mincho Pro", "HGS明朝B", "MingLiU", "SimSun", "MS P明朝", serif; color: #FFF; font-weight: bold; text-align: center; width: 50px; height: 50px; font-size: 20px; line-height: 50px; display: block; border-radius: 50%; position: absolute; left: 15px; top: 0; } .column-beginner-question > p { color: #8BC53E; font-size: 1.3em; line-height: 1.5em; font-weight: bold; } /* */ .column-beginner-opinions { position: relative; padding: 0 15px; margin-bottom: 30px; } .column-beginner-opinions > div { background-position: center 20px; background-repeat: no-repeat; -webkit-background-size: 50px 50px; background-size: 50px 50px; display: inline-block; position: relative; width: 49%; margin-right: 2%; vertical-align: top; z-index: 2; padding: 85px 4em 15px; } .column-beginner-opinions > div:nth-of-type(2n) { margin-right: 0; } .column-beginner-opinions > div.woman-opinion { background-image: url(/common/img/column/beginner/face-woman.png); } .column-beginner-opinions > div.man-opinion { background-image: url(/common/img/column/beginner/face-man.png); } .column-beginner-opinions > span { background-color: #F0F0F0; display: block; position: absolute; width: 49%; height: 100%; border-radius: 15px; top: 0; z-index: 1; } .column-beginner-opinions > span:nth-of-type(2n+1) { left: 0 } .column-beginner-opinions > span:nth-of-type(2n) { right: 0 } .column-beginner-opinions > span.woman-opinion { background-color: #FDE1E2; } .column-beginner-opinions > span.man-opinion { background-color: #D3E8F3; } /* */ .column-beginner-answer { background-color: #E7F3D8; overflow: hidden; padding: 35px 25px 25px 80px; margin-bottom: 30px; position: relative; } .column-beginner-answer::before { background-color: #FFF; content: "A"; font-family: "ヒラギノ明朝 Pro W4", "Hiragino Mincho Pro", "HGS明朝B", "MingLiU", "SimSun", "MS P明朝", serif; color: #8BC53E; font-weight: bold; text-align: center; width: 50px; height: 50px; font-size: 20px; line-height: 50px; display: block; border-radius: 50%; position: absolute; left: 15px; top: 20px; } .column-beginner-answer > img.fr { max-width: 37.5%; width: auto; margin-left: 15px; } .column-beginner-answer > strong { display: block; color: #8BC53E; font-size: 1.3em; line-height: 1.5em; overflow: hidden; margin-bottom: 1.5em; } .column-beginner-answer > p { overflow: hidden; } /* */ #column-beginner .column-next-article { border-color: #8BC53E; } #column-beginner .column-next-article > p em { color: #8BC53E; } /*###############################################*/ /* MEDIA QUERIES */ /*###############################################*/ @media screen and (max-width: 1024px) { #column-beginner-lists > ol > li > a > p { font-size: 1.2em; } } @media screen and (max-width: 799px) { #column-beginner-lists > ol > li, #column-beginner-lists > ol > li:nth-child(2n) { display: block; width: auto; padding: 15px; } #column-beginner-lists > ol > li:nth-child(2) { border-top: 1px solid #E6E6E6; padding-top: 15px; } #column-beginner-lists > ol > li > a > p::before { padding: 0.35em 0.5em; } /* Q&A part */ /*----------------------------------------------------------------*/ .column-beginner-question { padding: 80px 15px 0; min-height: none; text-align: center; } .column-beginner-question::before { left: 50%; margin-left: -25px; top: 15px; } /* */ .column-beginner-opinions > div { background-position: 15px 15px; -webkit-background-size: auto auto; background-size: auto auto; display: block; position: static; width: auto; margin: 0 auto 15px; padding: 15px 1em 15px 130px; border-radius: 15px; min-height: 100px; box-sizing: content-box; } .column-beginner-opinions > div.woman-opinion { background-color: #FDE1E2; } .column-beginner-opinions > div.man-opinion { background-color: #D3E8F3; } /* */ .column-beginner-answer { padding: 80px 15px 15px; } .column-beginner-answer::before { left: 50%; margin-left: -25px; top: 15px; } .column-beginner-answer > strong { margin-bottom: 15px; } .column-beginner-answer > img.fr { max-width: 100%; width: auto; margin: 15px auto; float: none; } } /* */ @media screen and (max-width: 599px) { .column-beginner-opinions > div { -webkit-background-size: 50px 50px; background-size: 50px 50px; padding-left: 80px; min-height: 50px; } } /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ /* /column/stories/ */ /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ #column-stories { margin-bottom: 20px; } #column-stories-main { margin-top: 30px; } #column-stories-main > nav { padding: 0 18px; } #column-stories-main > nav > div { display: inline-block; width: 49.5%; margin-right: 1%; } #column-stories-main > nav > div:nth-child(2) { margin-right: 0; } #column-stories-main > nav > div a { display: block; } #column-stories-main > nav > div a:hover { text-decoration: none; } #column-stories-main > nav > div span { background-color: #000; padding: 0.5em 0; border-radius: 10px 10px 0 0; text-align: center; color: #FFF; border-bottom: 2px solid #FFF; display: block } #column-stories-main > nav > div span:empty { visibility: hidden; } /* */ #column-stories-main > ul { background-color: #000; padding: 20px; margin-bottom: 30px; border-radius: 10px; } #column-stories-main > ul > li { background-color: #FFF; border-radius: 15px; padding: 30px; margin-bottom: 15px; } #column-stories-main > ul > li:last-child { margin-bottom: 0; } #column-stories-main > ul > li h3 { text-align: center; margin-bottom: 15px; } #column-stories-main > ul > li h3 > strong { display: block; font-size: 1.3em; margin-bottom: 5px; } #column-stories-main > ul > li > article h3 { border-bottom: 1px solid #CCC; padding-bottom: 15px; } /* Colors */ #column-stories-main > nav > div:first-child span { background-color: #8AC2DE; } #column-stories-main > nav > div:nth-child(2) span { background-color: #F7A6A9; } #column-stories-main.men-selected > nav > div:first-child a:hover, #column-stories-main.women-selected > nav > div:nth-child(2) a:hover { cursor: default; } #column-stories-main.men-selected > nav > div:nth-child(2) a:hover span { background-color: #FFC6C9; } #column-stories-main.women-selected > nav > div:first-child a:hover span { background-color: #AAE2FE; } #column-stories-main.men-selected > nav > div:first-child span { border-bottom-color: #8AC2DE; } #column-stories-main.men-selected > ul { background-color: #8AC2DE; } #column-stories-main.men-selected > ul > li h3 > strong { color: #8AC2DE; } #column-stories-main.women-selected > nav > div:nth-child(2) span { border-bottom-color: #F7A6A9; } #column-stories-main.women-selected > ul { background-color: #F7A6A9; } #column-stories-main.women-selected > ul > li h3 > strong { color: #F7A6A9; } /* Controls */ #column-stories-main.men-selected > ul#column-stories-men-list, #column-stories-main.women-selected > ul#column-stories-women-list { display: block; } #column-stories-main.women-selected > ul#column-stories-men-list, #column-stories-main.men-selected > ul#column-stories-women-list { display: none; } /* */ #column-stories-bottom { text-align: center; padding: 0 10px; } #column-stories-bottom > img { display: block; margin: 0 auto 30px; max-width: 180px; } #column-stories-bottom > p > strong { display: block; margin-bottom: 15px; color: #8BC53E; font-size: 1.3em; } /* */ #column-stories-main.men-selected .column-next-article { border-color: #8AC2DE; } #column-stories-main.men-selected .column-next-article > p em { color: #8AC2DE; } #column-stories-main.women-selected .column-next-article { border-color: #F7A6A9; } #column-stories-main.women-selected .column-next-article > p em { color: #F7A6A9; } /*###############################################*/ /* MEDIA QUERIES */ /*###############################################*/ @media screen and (max-width: 799px) { #column-stories-main > nav { padding: 0 10px; } #column-stories-main > ul { border-radius: 0; padding: 15px; } #column-stories-main > ul > li { padding: 15px; } } @media screen and (max-width: 399px) { #column-stories-bottom { font-size: 0.9em; } } /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ /* /column/yesno/ */ /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ #column-yesno { margin-bottom: 20px; } #column-yesno-main { background-color: #F3F9EC; margin-top: 30px; padding: 30px 0 40px; } #column-yesno-main > strong { display: block; text-align: center; font-size: 1.5em; margin-bottom: 30px; } #column-yesno-main > ul { width: 62.5%; margin: 0 auto; } #column-yesno-main > ul > li { background-color: #FFF; display: inline-block; width: 46.5%; margin-right: 7%; vertical-align: top; box-shadow: 3px 3px 5px #999; border-radius: 5px; } #column-yesno-main > ul > li:last-child { margin-right: 0; } #column-yesno-main > ul > li > a { display: block; position: relative; padding-top: 100%; } #column-yesno-main > ul > li > a > img { display: block; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 38.5%; max-width: 100px; } #column-yesno-main > ul > li > a > span { display: block; position: absolute; bottom: 10%; width: 100%; text-align: center; font-size: 2em; font-weight: bold; } #column-yesno-main > ul > li:first-child > a > span { color: #6DB3D6; } #column-yesno-main > ul > li:last-child > a > span { color: #F04D54; } /* */ .column-yesno-quiz { background-color: #EEE; text-align: center; padding: 30px 15px; } .column-yesno-quiz h3 { margin-bottom: 20px; font-weight: bold; } .column-yesno-quiz img { margin: 0 auto 20px; display: block; border: 3px solid #FFF; max-width: 720px; width: 100%; } .column-yesno-quiz p { margin-bottom: 20px; } .column-yesno-quiz button { display: inline-block; vertical-align: top; border-radius: 20px; border: 2px solid #FFF; box-shadow: 2px 2px 5px #999; width: 35%; margin-right: 3%; padding: 0.5em 0; cursor: pointer; } .column-yesno-quiz > div > button:nth-of-type(2) { margin-right: 0; } /* Colors */ #column-yesno-quiz-man { background-color: #E1EFF6; } #column-yesno-quiz-man h3 { color: #13A9BD; } #column-yesno-quiz-man > div > button:first-of-type, #column-yesno-quiz-woman > div > button:first-of-type { background-color: #FAC9CB; color: #F04D54; } #column-yesno-quiz-man > div > button:nth-of-type(2) { background-color: #A0DCE4; color: #13A9BD; } #column-yesno-quiz-woman { background-color: #FDEDEE } #column-yesno-quiz-woman h3 { color: #F04D54 } #column-yesno-quiz-woman > div > button:nth-of-type(2) { background-color: #E1EFF6; color: #6DB3D6; } /* */ #column-yesno-results p { text-align: justify; margin-left: auto; margin-right: auto; max-width: 700px; padding: 0 1em; } /* */ #column-yesno-quiz-followup { text-align: center; margin-top: 30px; padding: 0 20px; } #column-yesno-quiz-followup > button { background-color: #F04D54; width: 49%; margin-right: 2%; padding: 0.5em 0; display: inline-block; vertical-align: top; cursor: pointer; border: none; border-radius: 20px; color: #FFF; font-size: 1.1em; font-weight: bold; } #column-yesno-quiz-followup > button:last-of-type { background-color: #8CC63F; margin-right: 0; margin-bottom: 0; } #column-yesno-quiz-followup > button::after { content: ">"; float: right; position: relative; right: 5px; } /*###############################################*/ /* MEDIA QUERIES */ /*###############################################*/ @media screen and (max-width: 959px) { #column-yesno-main > ul > li > a > span { font-size: 1.8em; } } @media screen and (max-width: 799px) { .column-yesno-quiz h3 > span, .column-yesno-quiz p > span { display: block } /* */ #column-yesno-quiz-followup > button { width: 100%; margin-right: 0; display: block; margin-bottom: 20px; } } @media screen and (max-width: 599px) { #column-yesno-main > strong { font-size: 1.3em; margin-bottom: 20px; } #column-yesno-main > ul { width: 75%; } /* */ .column-yesno-quiz button { width: 48%; margin-right: 4%; } } @media screen and (max-width: 399px) { #column-yesno-main > ul { width: 80%; } #column-yesno-main > ul > li > a > span { font-size: 1.4em; } } /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ /* /column/success/ */ /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ #column-success { margin-bottom: 20px; } #column-success-box { background: url(/common/img/column/success/stripe-pattern.png); border-top: 2px solid #F79A9E; padding: 20px 0; } #column-success-box > img { display: block; margin: 0 auto 20px; max-width: 195px; } #column-success-box > ol { margin: 20px 15px 0; padding: 0 15px; counter-reset: counter0; } #column-success-box > ol > li { background-color: #FFF; display: inline-block; border: 1px solid #B3B3B3; width: 49%; margin-right: 2%; margin-bottom: 2%; vertical-align: top; counter-increment: counter0; } #column-success-box > ol > li:nth-of-type(2n) { margin-right: 0; } #column-success-box > ol > li > a { background: url(/common/img/column/success/check-circle.png) no-repeat right 15px center; display: block; padding: 1em; line-height: 1.6em; box-sizing: content-box; min-height: 70px; color: #3C3C3C; font-weight: bold; } #column-success-box > ol > li > a:hover { text-decoration: none; opacity: 0.75; } #column-success-box > ol > li > a > span { display: block; font-size: 1.1em; } #column-success-box > ol > li > a > span:first-of-type::before { content: "婚活パーティー必勝法 その" counter(counter0); color: #F79A9E; display: block; font-size: 0.9em; } #column-success-box > ol > li > a > span:only-of-type { padding: 0.8em 0; } /*###########################################################################################################################################*/ /* /column/success/XX.html/ */ /*###########################################################################################################################################*/ .column-success-subpage { margin-bottom: 30px; } .column-success-subpage > article { padding: 0 15px; overflow: hidden; } .column-success-subpage > article > img.fr { max-width: 35%; margin: 0 0 1em 1em; display: block; } .column-success-subpage > article > h4 { color: #F14E55; overflow: hidden; font-size: 1.3em; margin-bottom: 15px; font-weight: bold; } .column-success-subpage > article > h5 { background-color: #FCE0E1; padding: 0.5em 1em 0.4em; overflow: hidden; border-radius: 8px; font-size: 1.1em; margin-bottom: 15px; } .column-success-subpage > article > p { } .column-success-subpage > article em { color: #F14E55; } .column-success-subpage > article > ul > li { margin-left: 1em; text-indent: -1em; } .column-success-subpage > article > ul > li:last-child { margin-bottom: 1.6em; } /*###############################################*/ /* MEDIA QUERIES */ /*###############################################*/ @media screen and (max-width: 1024px) { #column-success-box > ol { margin-right: auto; margin-left: auto; } #column-success-box > ol > li > a { -webkit-background-size: 60px 60px; background-size: 60px 60px; } } @media screen and (max-width: 799px) { #column-success-box > ol > li { display: block; width: auto; margin: 0 auto 15px; } #column-success-box > ol > li:last-child { margin-bottom: 0; } /* */ .column-success-subpage > article > img.fr { max-width: 100%; margin: 0 auto 20px; float: none; } } /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ /* /column/break/XX.html/ */ /*###########################################################################################################################################*/ /*###########################################################################################################################################*/ nav#column-subpage-returnlink { } nav#column-subpage-returnlink a { background-color: #C8C8C8; color: #5A5A5A; padding: 1.1em 0 1.0em 1em; line-height: 1.1em; position: relative; display: block; } nav#column-subpage-returnlink a::after { content: "〉"; position: absolute; font-size: 1.5em; right: 10px; top: 50%; margin-top: -0.35em; font-weight: bold; } nav#column-subpage-returnlink a:hover { background-color: #5A5A5A; color: #C8C8C8; text-decoration: none; } /* */ .column-subpage-title { overflow: hidden; position: relative; margin-bottom: 30px; margin-left: -15px; margin-right: -15px; } .column-subpage-title > img { display: block; width: 100%; margin: 0 auto; } .column-subpage-title > h2 { color: #FFF; position: absolute; left: 24.5%; top: 85%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-weight: normal; font-size: 1.8em; line-height: 1.2em; margin-top: -0.6em; text-align: center; } .column-subpage-title > h2.small { font-size: 1.6em; } .column-subpage-title > h2 > span { display: block; } .column-subpage-title > h2 > span:only-of-type { padding: 0.7em 0 0.5em; } /* */ .column-subpage { } .column-subpage p { line-height: 1.5em; margin-bottom: 1.5em; } .column-subpage p:last-child { margin-bottom: 0; } .column-subpage > div { padding: 0 15px; margin-bottom: 30px; overflow: hidden; } .column-subpage > div:last-child { margin-bottom: 0; } .column-subpage > div > h4 { font-size: 1.25em; line-height: 1.3em; color: #8CC63F; margin-bottom: 5px; font-weight: bold; } .column-subpage > div > img.fr, .column-subpage > div > img.fl { margin-bottom: 1em; max-width: 34%; display: block; } .column-subpage > div > img.fr { margin-left: 1em; } .column-subpage > div > img.fl { margin-right: 1em; } /* */ .button-holder { margin: 20px auto 10px; text-align: center; padding: 0 10px; } .button-holder > button { vertical-align: top; width: auto; padding-left: 1.25em; padding-right: 2.25em; } /* /break/06.html */ /*###############################################*/ ol.green-numbers { counter-reset: counter0; padding-left: 1em; } ol.green-numbers > li { counter-increment: counter0; margin-left: 1.5em; text-indent: -1.5em; } ol.green-numbers > li::before { text-align: center; content: counter(counter0); font-size: 0.75em; border: 1px solid #8CC63F; color: #8CC63F; border-radius: 50%; height: 1.333em; width: 1.333em; line-height: 1.3em; display: inline-block; vertical-align: 0.2em; text-indent: 0; margin-right: 0.5em; } /* /break/11.html */ /*###############################################*/ .pale-green-box { background-color: #F3F9EB; border-radius: 15px; clear: both; overflow: hidden; padding: 25px 3em; } .pale-green-box > h5 { color: #8CC63F; font-weight: bold; font-size: 1em; } /*###############################################*/ /* MEDIA QUERIES */ /*###############################################*/ @media screen and (max-width: 1024px) { .column-subpage-title > h2 { font-size: 1.6em; } .column-subpage-title > h2.small { font-size: 1.1em; } } @media screen and (max-width: 799px) { .column-subpage-title > h2 { font-size: 1.6em; font-weight: normal; } .column-subpage-title > h2.small { font-size: 1.2em; } .column-subpage > p { margin-left: 10px; margin-right: 10px; } .column-subpage > div > img.fr, .column-subpage > div > img.fl { margin: 0 auto 20px; max-width: 100%; float: none; } /* /break/11.html */ /*###############################################*/ .pale-green-box { padding: 15px; } } @media screen and (max-width: 599px) { .column-subpage-title > h2 { font-size: 1.4em; } .column-subpage-title > h2.small { font-size: 1.0em; } } @media screen and (max-width: 499px) { .column-subpage-title > img { width: 105%; margin-left: -2.5%; } .column-subpage-title > h2 { font-size: 1.1em; } .column-subpage-title > h2.small { font-size: 0.8em; } } @media screen and (max-width: 399px) { .column-subpage-title > img { width: 108%; } .column-subpage-title > h2 { font-size: 1em; } .column-subpage-title > h2.small { font-size: 0.7em; } } @media screen and (max-width: 359px) { .column-subpage-title > h2 { font-size: 0.95em; } .column-subpage-title > h2.small { font-size: 0.6em; } } /*###########################################################################################################################################*/ /* /column/local/XX.html/ */ /*###########################################################################################################################################*/ #column-local > strong { display: block; margin: 0 0 15px; font-weight: bold; font-size: 150% !important; line-height: 1.6em; color: #8cc63f; } #column-local > div > h4 { background-color: #e7f3d9; padding: 0.5em 1em 0.4em; overflow: hidden; border-radius: 8px; font-size: 1.1em; margin-bottom: 15px; } #column-local > div > h4.m { background-color: #d4e8f2; color: #0071bc; } #column-local > div > h4.w { background-color: #fce1e2; color: #ff7bac; } #column-local .flow{ margin: 0 0 1.5em; padding: 0; } #column-local .flow li { padding: 0 0 0 1.5em; margin: 0 0 1.0em; background: url(../img/column/local/ico-flow.png) no-repeat left 0.2em; background-size: 1.0em auto; } @media only screen and (max-width: 799px){ #column-local > strong { margin: 0 10px 15px; font-size: 3.2vw !important; } }