@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap'); /* ページごとのCSS HTML上ではタグにページ名IDを付けて識別。 */ #index #light-collaboration .transfer{ margin: 30px auto; padding: 0 20px; /* border: solid 1px var(--sub-color); */ max-width: 1000px; min-height: 240px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; box-shadow: 0 0 1.5em -0.5rem hsl(200 50% 20% / 42%); border-radius: 10px; } #index #light-collaboration .transfer .before, #index #light-collaboration .transfer .after{ max-width: 350px; min-height: 200px; background-color: #ffffff; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } #index #light-collaboration .transfer > img, #flow .content .flows > img { transition-duration: 0.5s; } #index #light-collaboration .transfer .before h3, #index #light-collaboration .transfer .after h3{ font-size: 1.8rem; text-align: center; color: #ffffff; padding: 0.6em; width: 100%; } #index #light-collaboration .transfer .before p, #index #light-collaboration .transfer .after p{ color: var(--accent-color-red); font-weight: bold; margin-left: 0.7em; font-size: 1.2rem; } #index #light-collaboration .transfer .before img, #index #light-collaboration .transfer .after img{ width: 100%; } #light-collaboration p { text-align: center; line-height: 1.8em; padding-top:-2.5em; } #index #light-collaboration .transfer .before h3{ background-color: var(--main-color); } #index #light-collaboration .transfer .after h3{ background-color: var(--accent-color-red); } @media screen and (max-width: 910px){ #index #light-collaboration .transfer{ padding: 30px 0; flex-direction: column; } #index #light-collaboration .transfer > img{ transform: rotate(90deg); transition-duration: 0.5s; } } #index #light-collaboration .types{ max-width: 1000px; margin: 30px auto; display: flex; flex-wrap: wrap; justify-content: space-between; } #index #light-collaboration .types .family, #index #light-collaboration .types .apartment{ /* border: solid 1px var(--sub-color); */ width: 470px; height: 132px; padding: 20px 20px 20px 140px; background-repeat: no-repeat; background-position: 30px center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 0 1.8em -0.5rem hsl(200 50% 20% / 42%); border-radius: 10px; } #index #light-collaboration .types .family{ background-image: url(../images/icon-family.png); } #index #light-collaboration .types .apartment{ background-image: url(../images/icon-apartment.png); } #index #light-collaboration .types .family h3, #index #light-collaboration .types .apartment h3{ background-color: var(--sub-color); font-size: 1.2rem; width: 100%; padding: 0.5em; text-align: center; } #index #light-collaboration .types .family p, #index #light-collaboration .types .apartment p{ color: red; } #index #light-collaboration .types .family span, #index #light-collaboration .types .apartment span{ font-size: 1.8em; font-weight: bold; } #index #light-plus p{ text-align: center; } #index #light-plus .text1{ font-weight: bold; font-size: 1.5rem; margin: 0.5em; } #index #light-plus .text2{ display: table; margin: 1em auto; text-align: center; color: #ffffff; font-weight: bold; font-size: 1.5em; padding: 0.1em 1em; background-color: var(--main-color); border-radius: 2em; } #index #light-plus .text3{ color: var(--accent-color-red); font-size: 1.3rem; font-weight: bold; } #index #light-plus .text3 span{ font-size: 2em; } #index #light-plus .overviews{ display: flex; flex-wrap: wrap; justify-content: space-between; } #index #light-plus .overviews .child{ display: block; max-width: 470px; /* border: solid 3px var(--main-color); */ box-shadow: 0 0 1.8em -0.5rem hsl(200 50% 20% / 42%); border-radius: 10px; padding: 18px; text-align: center; } #index #light-plus .overviews .child img{ max-width: 200px; height: auto; margin:0 auto; } #index #light-plus .overviews .child h3{ padding-top :0.5em; padding-bottom :0.5em; } #index #light-plus .overviews .child h3{ text-align: center; font-weight: bold; font-size: 1.5rem; margin: 0.3rem; } #index #light-plus .overviews .child p{ text-align: left; } #index #offer-area .content{ background-image: url(../images/japanesemap-10015.png); background-repeat: no-repeat; background-size: 220px; background-position: center bottom 10px; padding-bottom: 40px; } #index #offer-area h2{ margin-bottom: 1.5rem; } #index #offer-area .area-and-map{ width: 100%; margin-top: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } #index #offer-area .area-and-map .areas{ width: 45%; } #index #offer-area .area-and-map .areas h3{ display: inline-block; font-size: 1.2rem; font-weight: bold; color: #ffffff; margin: 0.5em 0; padding: 0.5em 2em; background-color: var(--main-color); border-radius: 10000px; } section#flow { width: 1000px; max-width: 90vw; box-shadow: 0 0 1.5em -0.5rem hsl(200 50% 20% / 42%); border-radius: 10px; margin:0 auto; } #index #flow .flows{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #index #flow .flows .child{ width: 300px; margin-bottom: 30px; } #index #flow .flows .child .image-frame{ width: 100%; border: solid 3px var(--main-color); background-color: var(--sub-color); padding-bottom: 27px; } #index #flow .flows .child img{ max-width: 240px; display: block; margin: 0 auto; } #index #flow .flows .child h3{ text-align: center; font-size: 1.3rem; margin: 1.5em; font-weight: bold; } #flow h2 { padding-top: 1em; } #index #flow .flows .child p{ margin-top: 1em; font-size: 1rem; text-align: center; } #index #options .content > p{ margin-bottom: 1rem; } #options { display: flex; } #index #options .options-list{ display: flex; flex-wrap: wrap; justify-content: space-around; } #index #options .options-list .child{ max-width: 100%; } #index #options .options-list .child img{ display: block; margin: 0 auto; } #index #options .options-list .child p{ margin: 1em; } #easy-transfer img{ display: block; margin: 20px auto; } @media screen and (max-width: 681px){ #easy-transfer img{ width: 95%; } } #index #easy-procedure .tab-contents .tabs{ display: flex; justify-content: flex-start; margin-top: 2.5em; } #index #easy-procedure .tab-contents .tabs button{ font-family: 'Montserrat','Noto Sans JP', sans-serif; border: none; font-size: 1.5rem; font-weight: bold; color: #d5d5d5; padding: 3px 0.5em; margin-right: 6px; background-color: var(--sub-color); cursor: pointer; border-radius: 15px 15px 0 0; } #index #easy-procedure .tab-contents .tabs button.opened{ color: #fff; background-color: var(--main-color); font-family: 'Montserrat','Noto Sans JP', sans-serif; padding: 0.5em 0.7em; border-radius: 15px 15px 0 0; } #index #easy-procedure .tab-contents .contents{ /* border: solid 3px var(--main-color); */ padding: 1rem; box-shadow: 0 0 1.5em -0.5rem hsl(200 50% 20% / 42%); border-radius: 0 15px 15px 15px; text-align: left; } #index #easy-procedure .tab-contents .contents h3{ font-size: 1.3rem; background-color: var(--sub-color); padding: 0.7rem; margin-bottom: 1rem; } #index #easy-procedure .tab-contents .contents p{ margin-bottom: 1rem; } #index #easy-procedure .tab-contents .get-number{ border-collapse: collapse; margin-bottom: 1rem; } #index #easy-procedure .get-number th, #index #easy-procedure .get-number td{ border: solid 1px var(--main-color); padding: 0.5rem; } #index #easy-procedure .get-number tr:first-child th{ background-color: var(--sub-color); font-weight: bold; font-size: 1.3rem; } #index #easy-procedure .get-number th:first-child{ text-align: left; padding: 0.5rem; } #index #easy-procedure .get-number p{ text-align: center; } #index #easy-procedure .get-number .link-button{ font-size: 1rem; margin: 0 auto 1rem; } #index #easy-procedure .get-number .tel,.tel{ font-size: 3rem; font-weight: bold; } .tel a{ color:midnightblue; letter-spacing: 0.1em; } #index #easy-procedure .tab-contents .contents div{ display: none; } #index #easy-procedure .tab-contents .contents div.opened{ display: block; } #contact .tel{ font-size: 3rem; font-weight: bold; letter-spacing: 0.1em; } #contact p{ text-align: center; } #contact p a{ color: var(--main-color); } #lightplus #recommended .items{ display: flex; flex-wrap: wrap; justify-content: space-between; } #lightplus #recommended .items .child{ width: 300px; margin-bottom: 30px; } #lightplus #recommended .items .child .image-frame{ width: 100%; border: solid 3px var(--main-color); background-color: var(--sub-color); padding-bottom: 27px; } #lightplus #recommended .items .child .image-frame h3{ text-align: center; font-size: 1.1rem; margin: 0.8em 0; font-weight: bold; } #lightplus #recommended .items .child .image-frame img{ max-width: 240px; display: block; margin: 0 auto; } #lightplus #recommended .items .child p{ margin-top: 1em; } #lightplus #usage-fee-image .family-plan{ display: table; margin: 1em auto; text-align: center; color: #ffffff; font-weight: bold; font-size: 1.5em; padding: 0.3em 1em; background-color: var(--main-color); border-radius: 2em; } #lightplus #usage-fee-image .price{ text-align: center; color: var(--accent-color-red); font-size: 1.3rem; font-weight: bold; } #lightplus #usage-fee-image .price span{ font-size: 2em; } #lightplus #usage-fee-image .price-graph{ display: block; margin: 10px auto; } #lightplus #usage-fee-image .message{ font-size: 0.8rem; padding: 0.8em; border: solid 1px #999999; background-color: #eeeeee; margin: 1rem auto; } #lightplus #usage-fee-image .annotation{ font-size: 0.8rem; } @media screen and (max-width: 980px){ #index #light-collaboration .types{ flex-direction: column; align-items: center; } #index #light-collaboration .types .family{ margin-bottom: 30px; } #index #light-plus .overviews, #index #flow .flows{ flex-direction: column; align-items: center; } #index #light-plus .overviews .child{ margin-bottom: 30px; } #index #offer-area .area-and-map{ flex-direction: column; align-items: center; justify-content: center; } #index #offer-area .area-and-map .map{ width: 20%; } #lightplus #recommended .items{ flex-direction: column; align-items: center; } #lightplus #usage-fee-image .price-graph{ width: 100%; } } @media screen and (max-width: 420px){ #index #light-collaboration .types .family, #index #light-collaboration .types .apartment{ width: 100%; background-position: center 10px; padding: 100px 10px 10px 10px; height: auto; } #index #light-collaboration .types .family h3, #index #light-collaboration .types .apartment h3{ margin: 1rem 0; } #index #light-plus .overviews .child, #index #flow .flows .child{ width: 100%; } #index #light-plus .overviews .child img, #index #flow .flows .child img{ width: 100%; } #index #flow .flows .child .image-frame{ padding: 10px; } #index #options .options-list .child img{ width: 100%; } img.flow2 { width: 100%; } main section#flow { } } /* --------------- 追加CSS --------------- */ .menu-contact a:link { /* メニューの問合せボタン */ margin-left: 1em; display: block; background-color: midnightblue; border-radius: 3em; padding:12px 16px 12px 16px; color:#fff; width: 150px; text-align: center; transition : all 0.2s ease 0s; } .menu-contact a:visited { /* メニューの問合せボタン訪問前 */ margin-left: 1em; display: block; background-color: midnightblue; border-radius: 3em; padding:12px 16px 12px 16px; color:#fff; width: 150px; text-align: center; transition : all 0.2s ease 0s; } .menu-contact a:hover { transition : all 0.2s ease 0s; } h1 { /* 見出し */ font-family: Roboto; font-size: 60px; font-weight: bold; line-height: 1.2; padding: 0 50px; text-align: center; color: #fff; } section.child img { /* ご利用の流れ */ text-align: center; margin:0 auto; } .content { text-align: center; } .document-link { width: 60%; margin: 0 0 0 auto; text-align: left; } .document-link a { color: #ff7a8a; } .document-link a:hover { color: #191970; } .content img { padding-bottom: 1.5em; } main section#flow img { width: 100%; } .child h3 { /* オプションタイトル */ font-size: 1.2rem; } .form { padding:1em; width: 600px; max-width: 100%; margin:0 auto; } #contact-form dt{ font-weight: bold; font-size: 1.2rem; text-align: left; } #contact-form dd input{ width: 100%; height: 40px; font-size: 1rem; padding-left: 0.5em; font-family: 'Noto Sans JP', sans-serif; margin:0.3em 0 1em 0; background-color: #ededed; border-radius: 7px; outline: none; border:none; } #contact-form textarea { width: 100%; height: 120px; font-size: 1rem; padding: 0.5em; font-family: 'Noto Sans JP', sans-serif; margin:0.3em 0 1em 0; background-color: #ededed; border-radius: 7px; outline: none; border:none; } .button-area { display: flex; justify-content: space-between; } .button-area input { width: 100%; height: 50px; background-color: var(--main-color); color: #fff; border-radius: 7px; outline: none; border:none; font-family: 'Noto Sans JP', sans-serif; font-size: 1rem; } input#submit, input#finish { margin-right: 1em; } input#reset, input#repeat{ background-color: #fff; color: midnightblue; border:2px solid midnightblue; } article.about { width: 930px; max-width: 100%; padding:1em; margin:0 auto; vertical-align: middle; } article.about dl { display:block; align-items: center; vertical-align: middle; } article.about dt { background-color: var(--sub-color); vertical-align: middle; padding:0.5em; margin-top:1em; align-items: center; font-size: 1.1rem; font-weight: bold; } article.about dd { vertical-align: middle; align-items: center; padding:0.5em; line-height: 1.6em; } .main-img p { font-size: 1.5rem; } ::placeholder { color: #b3b3b3; } .form-privacy textarea{ width: 100%; border:solid 2px #b3b3b3; background-color: #fff; } .p-text { margin-bottom: 0.5em; } .submit button{ margin:1em 0 1em 0; background-color: midnightblue; color:#fff; border-radius: 7px; border:none; padding:1em 3em 1em 3em; font-family: 'Montserrat','Noto Sans JP', sans-serif; font-size: 1rem; cursor: pointer; width: 250px; }