/* rest.css*/ article,aside,details,figcaption,figure,footer,header,hgroup,img,menu,nav,section{display:block}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}img{margin:0 auto;padding:0}/* rest.css*/ /*---------------------------------------------------------------------------------------------- button:hover ----------------------------------------------------------------------------------------------*/ @-webkit-keyframes hvr-wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes hvr-wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.hvr-wobble-vertical{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale}.hvr-wobble-vertical:active,.hvr-wobble-vertical:focus,.hvr-wobble-vertical:hover{-webkit-animation-name:hvr-wobble-vertical;animation-name:hvr-wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1} /*---------------------------------------------------------------------------------------------- Basic Style ----------------------------------------------------------------------------------------------*/ html{ font-size:62.5%;} body{width:100%;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:1.8rem;line-height:1.7; background:url(../img/base/base_background.jpg);} #body__wrap{width:960px; margin: 0 auto; background:#FFF; border-left: 2px solid #D1D1D1; border-right: 2px solid #D1D1D1;} #scroll {position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch} .side_photo{float: right; padding: 0 0 100px 12px;} .youtube{ width:830px; height:450px; margin:10px auto;} #body__wrap_none{display:none;} /*---------------------------------------------------------------------------------------------- .sub-head.letter ----------------------------------------------------------------------------------------------*/ .sub-head h1{ width:95%; margin:0 auto; padding:70px 0 15px;} .letter{width:85%;margin:0 auto; padding:15px 0 0;} /*---------------------------------------------------------------------------------------------- Styles for .font_style ----------------------------------------------------------------------------------------------*/ .u {text-decoration:underline;} .b {font-weight:bold;} .r { color:#F00;} .y {color:#FFF027;} .rub {font-weight: bold;background-image: url(../img/base/base_border.gif);background-position: bottom;background-repeat: repeat-x;} .p30{font-size:130%;} .p50{font-size:150%;} .p_01{font-size:350%;} .p_02{font-size:220%;} .p08{font-size:80%;} .mailform{text-align:center; color:#FFF027;font-weight:bold;margin:0 auto -25px;} .pc{ display:block; } .sp { display:none; } /*---------------------------------------------------------------------------------------------- Styles for .countdown ----------------------------------------------------------------------------------------------*/ #countdown__background{width:100%; padding:0; margin:0;background:#000; height: 115px; line-height: 1.2;} .countdown__txt{width:900px;margin:0 auto;font-size:3.5rem;font-weight:bold;color:#FFF027;text-align:center;padding:15px 0 15px; line-height: 1.3;} .countdown__txt p{ color:#FFF; display:inline; font-size:2.5rem; line-height: 1;} .countdown__wrap {width:100%;height:83px;margin:0 auto;padding:0;} .countdown__wrap_padding{} .countdown2 {width: 720px;margin:0 auto;padding:10px 0;background:url(../img/cd_02.png) repeat-y;background-size: 100%; font-weight:bold;color: #000;text-align:center; font-size: 110%;} .count2 {width:100%;margin:0 auto;} .count2 .c02{color:#E70003; font-size: 150%;} /*---------------------------------------------------------------------------------------------- Styles for #header ----------------------------------------------------------------------------------------------*/ header{width:100%;margin:0 auto0 auto 0; background:url(../img/test_opt_header_02.png) center repeat-x; background-color: #fff;} #header__img_b{width:100%;margin:0 auto; background-color: #000;} #header__img_back{margin:0 auto; } /*---------------------------------------------------------------------------------------------- Styles for .BolettoBox ----------------------------------------------------------------------------------------------*/ .BolettoBox {width: 850px;margin:10px auto 40px;padding: 0px;} .BolettoBox ul {display: inline;} .BolettoBox li {font-size: 2.5rem;line-height: 1.4;letter-spacing: -1px;border-bottom: 1px dotted #b78227;padding: 15px 0 15px 55px; font-weight: bold;color: #141414;background: url(../img/base/base_cheack_03.png)no-repeat 1.5% 15%;} .BolettoBox li p{width: 775px;font-weight: initial;font-size: 2rem;border-top: 1px dashed #aaa;margin: 10px auto 0;padding: 10px 0 0;} .BolettoBox li:nth-child(even) {background-color: #FFFEF6;} /*---------------------------------------------------------------------------------------------- Styles for .profile ----------------------------------------------------------------------------------------------*/ #profile{width:100%;margin:0 auto;} .profile__box{width:100%;margin:0 auto;} .profile__box_txt{ width:90%; margin:0 auto;padding:15px 0;} .profile__box p{width:100%;margin:0 auto;font-size:1.6rem;} .profile__box_wrap{ width: 800px; margin: 0 auto; background: url(../img/base/base_fream_03.png) repeat-y; background-size: 100%;} .profile__box_wrap img{ width: 97%;} /*---------------------------------------------------------------------------------------------- Styles for .voice ----------------------------------------------------------------------------------------------*/ #voice{width:100%;margin:0px auto;} #voice hr{ width:90%; margin:0 auto 10px; border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff;} #voice__wrap{ width:838px; margin:0 auto ; background:url(../img/base/voice_fream02.png) repeat-y; } .voice_box{ margin:10 auto 10px; } .voice__wrap{ width:838px; margin:0 auto ; background:url(../img/base/voice_fream02.png) repeat-y; } .voice__wrap_box{width:100%;margin:0 auto;} .voice__wrap_box_title{ width:100%; margin:0 auto;} .voice__wrap_box_img{ width:30%; float:left;} .voice__wrap_box_txt{ width:90%; margin:0 auto;padding:0 0 30px;} .voice__wrap_box p{width:86%;margin:0 auto;} .voice__wrap_box hr{ width:90%; margin:15px auto 20px; border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff; clear:both; clear:both;} .voice__wrap_txt{width:88%;margin:-30px auto 30px; padding:0; text-align:right; } .voice__wrap_txt02{width:88%;margin:-20px auto 30px; padding:0; text-align:right; } /*---------------------------------------------------------------------------------------------- Styles for .voice ----------------------------------------------------------------------------------------------*/ #voice__wrap02{ width:843px; margin:0 auto ; background:url(../img/base/voice_fream02a.png) repeat-y; } .voice__wrap02{ width:843px; margin:0 auto ; background:url(../img/base/voice_fream02a.png) repeat-y; } .voice__wrap02_box{width:100%;margin:0 auto;} .voice__wrap02_box_title{ width:100%; margin:0 auto;} .voice__wrap02_box_img{ width:30%; float:left;} .voice__wrap02_box_txt{ width:90%; margin:0 auto;padding:0 0 30px;} .voice__wrap02_box p{width:86%;margin:0 auto;font-size:1.5rem;} .voice__wrap02_box hr{ width:90%; margin:15px auto 20px; border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff; clear:both; clear:both;} /*---------------------------------------------------------------------------------------------- #top_form ----------------------------------------------------------------------------------------------*/ #top_form{ display: none; width: 100%; margin: 0 auto;top: 0px;left: 0px; z-index:1000; position: fixed;background: url(../img/matsui_opt_header_02.png);overflow-y: scroll;} #top_form_wrap{ width:960px; margin: 5px auto;} #top_form_wrap_left{ width: 660px; margin:10px 0 0 0px; float:left;} #top_form_wrap_left_txt input{ width:660px; margin:5px 0 10px; padding:16px 10px; border:4px solid #333;font-size:1.6rem;} #top_form_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;} #top_form_wrap_right{ width: 235px; margin:5px 40px 0 0; padding: 0 ; float:right;} #top_form_wrap_left_b{ width: 65%; margin:3px auto 0px; float: left;} #top_form_wrap_right_b{ width: 33%; float: right; margin:3px auto 0; padding: 0;} /*---------------------------------------------------------------------------------------------- Bパターン ----------------------------------------------------------------------------------------------*/ #top_form_wrap_b{ width:960px; margin: 5px auto;} #top_form_wrap_left_b{ width: 64%; margin:4px auto 5px; float: left;} #top_form_wrap_right_b{ width: 34.5%; float: right; margin:18px auto 0; padding: 0;} #top_form_wrap_right_b input{ width:100%;} #top_form_wrap_right_b input:hover{ opacity: 0.8;} /*---------------------------------------------------------------------------------------------- #header_form ----------------------------------------------------------------------------------------------*/ #header_form {width: 100%;margin: 0 auto 0;background: url(../img/matsui_opt_header_02.png);} #header_form_wrap{ width:960px; margin: 0 auto;padding:5px 0 0;} #header_form_wrap_left{ width: 605px; margin:29px 0 5px; float: left;} #header_form_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:1.6rem; color: #FFF; } #header_form_wrap_left p img{ display:inline; margin:0 6px -5px 0;} #header_form_wrap_left_txt input{ width:100%; box-sizing:border-box; margin:5px 0 10px; padding:24px 10px; border:4px solid #333;font-size:1.6rem;} #header_form_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;} #header_form_wrap_right{ width: 341px; margin:0 auto; padding: 15px 0; float: right;} #header_form_wrap_right_b{ width: 341px; margin:0 auto; padding: 14px 0 15px; float: right;} /*---------------------------------------------------------------------------------------------- #header_form02 ----------------------------------------------------------------------------------------------*/ #header_form02 {width: 100%;margin: 0 auto 0;background: url(../img/matsui_opt_header_02.png);} #header_form02_wrap{ width:850px; margin: 0 auto;padding:5px 0 0;} #header_form02_wrap_left{ width: 555px; margin:21px 0 5px; float: left;} #header_form02_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:1.6rem; color: #FFF; } #header_form02_wrap_left p img{ display:inline; margin:0 6px -5px 0;} #header_form02_wrap_left_txt input{ width:100%; box-sizing:border-box; margin:5px 0 10px; padding:24px 10px; border:4px solid #333;font-size:1.6rem;} #header_form02_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;} #header_form02_wrap_right{ width: 280px; margin:0 auto; padding: 15px 0; float: right;} #header_form02_wrap_right_b{ width: 280px; margin:0 auto; padding: 19px 0 15px; float: right;} #header_form02_wrap_right_b input{ width: 100%; } /*---------------------------------------------------------------------------------------------- Styles for #mailform__second ----------------------------------------------------------------------------------------------*/ #mailform__second{ width:100%; margin:0 auto;} #mailform__second_wrap{ width:830px; margin:0 auto 20px; border:5px solid #a70005; background:#fffef6;} #mailform__second_wrap:after {content: "";display: block;clear: both;} #mailform__second_wrap_left{ width: 775px; margin:12px auto 0;} #mailform__second_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:2.2rem; } #mailform__second_wrap_left p img{ display:inline; margin:0 6px -5px 0;} #mailform__second_wrap_left_txt input{ width:735px; margin:5px auto 15px; padding:17px 15px; border:4px solid #333;font-size:1.6rem;} #mailform__second_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;} #mailform__second_wrap_attention p{ width: 300px; font-size:1rem; color:#666; padding:0 0 30px 35px; margin:0 ;background:url(../img/base/base_icon_attention.png) no-repeat;} #mailform__second_wrap_right{ width: 775px; margin:0 auto 17px;} /*---------------------------------------------------------------------------------------------- フォーム注釈 ----------------------------------------------------------------------------------------------*/ .form__must{width:10%; box-sizing:border-box; background:#fff; font-weight:bold; float:left; margin:5px 0 10px; padding:13px 0 0 0; border:4px solid #333; border-right:none; height:70px;} .form__must p{background:#f00; color:#fff; padding:5px;text-align: center; font-size:1.5rem!important;} .form__must_box{border-left:none!important;width:90%!important;height:70px!important; box-sizing:border-box!important;} /*---------------------------------------------------------------------------------------------- Styles for#close__img ----------------------------------------------------------------------------------------------*/ .close__img{ width:100%; position: relative;} .close__img_text{ width:100%; height:100%; position:absolute; background-color: rgba(0, 0, 0, 0.8); z-index:999;} .close__img_text h1 { width:90%; margin:90px auto 0; font-size:5rem; line-height:1.3; color:#FFF; text-align:center; font-weight:bold; text-shadow: 5px 5px 3px #333,-5px 5px 3px #333,5px -5px 3px #333,-5px -5px 3px #333;} /*---------------------------------------------------------------------------------------------- Styles for #footer__attention ----------------------------------------------------------------------------------------------*/ #footer__attention{ width:100%; background-color: #FFF;} #footer__attention p{ width:90%; margin: 0 auto 80px;font-size:1.4rem; color: #666;} /*---------------------------------------------------------------------------------------------- Styles for footer ----------------------------------------------------------------------------------------------*/ footer {width:100%; height:auto;margin:0 auto 0; background-color: #ecf0ee;} #footer__inner {width: 900px;margin:0 auto;padding: 30px 0 80px; font-size:1.1rem;} #footer__inner_logo {width: 248px; float:left; padding:10px 0 0 20px;} #footer__inner_right {width:600px; float:right;} #footer__inner li {float: left;margin-right: 15px;list-style-type: none;padding-right: 10px;} #footer__inner p {text-align: left;clear: both;padding-top: 5px; color:#666;} /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 【 max-width: 640px 】 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ @media screen and (max-width: 640px) { /*---------------------------------------------------------------------------------------------- Basic Style ----------------------------------------------------------------------------------------------*/ html{ font-size:62.5%;} body{width:100%;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:1.5rem;line-height:1.7; background:url(../img/base/base_background.jpg);} #body__wrap{width:100%; float:none;background:#FFF; border:none;} img{ width:100%;} .youtube__wrap{width:90%; margin:0 auto;} .youtube{width: 100%;height: 200px;} .side_photo{float:none; padding: 0;} .p50 { font-size: 120%; } .p_01{font-size:120%;} .p_02{font-size:100%;} #body__wrap_none{display:block;} .pc { display:none; } .sp { display:block; } .mailform{margin:0 auto -2%;} /*---------------------------------------------------------------------------------------------- Styles for .countdown ----------------------------------------------------------------------------------------------*/ #countdown__background{width:100%;height:auto; margin:-1px auto 0; background:#000; } .countdown__txt{width:100%;margin:0 auto;font-size:1.8rem;font-weight:bold;color:#f3ff6b;text-align:center;padding:7px 0;} .countdown__txt p{ color:#FFF; display:inline; font-size:1.4rem; line-height: 1;} .countdown__wrap {width:100%;height:auto;margin:0 auto;padding:0;} .countdown__wrap_padding{padding: 0;} .countdown2 {width: 90%;margin:0 auto;padding:10px 0;background:url(../img/cd_02.png) repeat-y;background-size: 100%; font-weight:bold;color: #000;text-align:center; font-size: 85%;} .count2 .c02{color:#E70003; font-size: 150%;} /*---------------------------------------------------------------------------------------------- letter.sub-head ----------------------------------------------------------------------------------------------*/ .letter{width:90%;margin:5px auto 0; padding:0;} .sub-head h1{ width:100%; margin:0 auto; padding:40px 0 10px;} /*---------------------------------------------------------------------------------------------- Styles for #header ----------------------------------------------------------------------------------------------*/ header{width:100%;margin:0 auto; padding:0 0 0;} #header__img{width:100%;margin:0 auto; background:#FFF;} #header_arrow{ display: none;} #header__img_back{width:100%;margin:0 auto; background:no-repeat 0% 97%; background-size: 39%;} /*---------------------------------------------------------------------------------------------- Styles for #section__area01 ----------------------------------------------------------------------------------------------*/ .section__area00 img{ width:90%; margin:0 auto;} /*---------------------------------------------------------------------------------------------- Styles for .BolettoBox ----------------------------------------------------------------------------------------------*/ #BolettoBox{ width:100%; margin:0 auto;} .BolettoBox {width: 90%;margin:10px auto 0;padding: 0px;} .BolettoBox ul {display: inline;} .BolettoBox li {font-size: 1.8rem;line-height: 1.2;letter-spacing: 0px;border-bottom: 1px dotted #b78227;padding: 15px 0 15px 40px; font-weight: bold;color: #141414;background: url(../img/base/base_cheack_03.png)no-repeat 2% 50%;background-size: 6%;} .BolettoBox li p{width: 100%;font-weight: initial;font-size: 1.6rem;border-top: 1px dashed #aaa;margin: 10px auto 0;padding: 10px 0 0;} .BolettoBox li:nth-child(even) {background-color: #FFFEF6;} /*---------------------------------------------------------------------------------------------- Styles for .profile ----------------------------------------------------------------------------------------------*/ #profile{width:100%;margin:0 auto;} .profile__box{width:100%;margin:0 auto;} .profile__box_txt{ width:90%; margin:0 auto;padding:15px 0 30px;} .profile__box p{width:100%;margin:0 auto;font-size:1.6rem;} .profile__box hr{ width:90%; margin:15px auto 20px; border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff; clear:both; clear:both;} .profile__box_wrap{ width: 100%; margin: 0 auto; background: url(../img/base/base_fream_03.png) repeat-y; background-size: 100%;} /*---------------------------------------------------------------------------------------------- Styles for .voice ----------------------------------------------------------------------------------------------*/ #voice{width:100%;margin:0 auto;} #voice img{width:90%;margin:0 auto;} #voice__wrap{ width:90%; margin:0 auto; background:url(../img/base/voice_fream02.png) repeat-y;background-size: 100%;} .voice__wrap{ width:90%; margin:0 auto; background:url(../img/base/voice_fream02.png) repeat-y;background-size: 100%;} .voice__wrap_box{width:100%;margin:0 auto;} .voice__wrap_box_title{ width:100%; margin:0 auto;} .voice__wrap_box_txt{ width:90%; margin:0 auto;padding:0 0 30px;} .voice__wrap_box p{width:85%;margin:0 auto;font-size:1.6rem;} .voice__wrap_box hr{ width:90%; margin:15px auto 20px; border-top: 1px dashed #8c8b8b;border-bottom: 1px dashed #fff; clear:both; clear:both;} .voice__wrap02{ width:90%; margin:0 auto; background:url(../img/base/voice_fream02a.png) repeat-y;background-size: 100%;} .voice__wrap_txt{width:88%;margin:-3% auto 2%; padding:0; text-align:right;font-size:70%; } .voice__wrap_txt02{width:88%;margin:-2% auto 2%; padding:0; text-align:right;font-size:70%; } /*---------------------------------------------------------------------------------------------- Styles for #mailform__second ----------------------------------------------------------------------------------------------*/ #mailform__second{ width:100%;} #mailform__second_wrap{ width:85%; margin:0 auto 20px; border:5px solid #a70005; background:#fffef6;} #mailform__second_wrap:after {content: "";display: block;clear: both;} #mailform__second_wrap_left{ width: 90%; margin:6px auto -9px;} #mailform__second_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:2.2rem; } #mailform__second_wrap_left p img{ width:34px;display:inline; margin:0 6px -5px 0;} #mailform__second_wrap_left_txt input{ width:84%; margin:1px 0 -4p; padding:9px 15px; border:4px solid #333;font-size:1.6rem;} #mailform__second_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;} #mailform__second_wrap_attention p{ font-size:10px;font-size:1rem; color:#666; padding:0 0 10px 35px; margin:0 ;background:url(../img/base/base_icon_attention.png) no-repeat;} #mailform__second_wrap_right{ width: 90%; margin:0 auto; } #mailform__second_wrap_right input{ width: 100%; } /*---------------------------------------------------------------------------------------------- #top_form ----------------------------------------------------------------------------------------------*/ #top_form{ display: none; width: 100%;top: 0;z-index: 1;background: url(../img/base/form_back01.png) no-repeat center; ;overflow-y: scroll;} #top_form_wrap{ width:100%; margin: 5px auto 0;} #top_form_wrap form { display: flex; align-items: center; padding: 0 0.5em; } #top_form_wrap_left{ flex-basis: 60%; margin:0 auto 0; float:none;} #top_form_wrap_left_txt{ width:100%; margin:0 auto;} #top_form_wrap_left_txt input{ width:93%; margin:5px auto 6px; padding:6px 4px; border:4px solid #333;font-size:0.6rem;} #top_form_wrap_right{ flex-basis: 40%; margin:0 0 0 5px; float:none;} #top_form_wrap_right input{ width: 100%; margin: 0 auto; float: none;} #top_form_wrap_b{ width:95%; margin: 5px auto;} #top_form_wrap_left_b{ width: 64%; margin:4px auto 5px; float: left;} #top_form_wrap_right_b{ width: 34.5%; float: right; margin:13px auto 0; padding: 0;} #top_form_wrap_right_b input{ width:100%;} #top_form_wrap_right_b input:hover{ opacity: 0.8;} /*---------------------------------------------------------------------------------------------- #header_form ----------------------------------------------------------------------------------------------*/ #header_form {width: 100%;margin: 0 auto 0;background: url(../img/base/form_back02.png) center;} #header_form_wrap{ width:100%; margin: 0 auto;padding:5px 0 0;} #header_form_wrap form { display: flex; align-items: center; padding: 0 0.5em; } #header_form_wrap_left{ flex-basis: 60%; margin:3px auto 5px;} #header_form_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:1.6rem; color: #FFF; } #header_form_wrap_left p img{ display:inline; margin:0 6px -5px 0;} #header_form_wrap_left_txt input{ width:90%; box-sizing:border-box; margin:5px 0 4px; padding:14px 10px; border:4px solid #333;font-size:3.5vw;} #header_form_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;} #header_form_wrap_right{ flex-basis: 40%; margin:0 auto 0; padding: 0 0 0 10px;} #header_form_wrap_right input{ width: 100%;} #header_form_wrap_right_b{ width: 40%; margin:0 auto; padding: 15px 0 15px; float: right;} #header_form_wrap_right_b input{ width: 100%;} #header_form02 {width: 100%;margin: 0 auto 0;background: url(../img/base/form_back02.png) center;} #header_form02_wrap{ width:100%; margin: 0 auto;padding:5px 0 0;} #header_form02_wrap form { display: flex; align-items: center; padding: 0 0.5em; } #header_form02_wrap_left{ flex-basis: 60%; margin:3px auto 5px;} #header_form02_wrap_left p{ font-weight:bold; margin:0 0 0 5px; font-size:1.6rem; color: #FFF; } #header_form02_wrap_left p img{ display:inline; margin:0 6px -5px 0;} #header_form02_wrap_left_txt input{ width:90%; box-sizing:border-box; margin:5px 0 4px; padding:14px 10px; border:4px solid #333;font-size:3.5vw;} #header_form02_wrap_left_txt input:hover{border:4px solid #F00; background-color:#FFC;} #header_form02_wrap_right{ flex-basis: 40%; margin:0 auto 0; padding: 0 0 0 10px;} #header_form02_wrap_right input{ width: 100%;} #header_form02_wrap_right_b{ width: 40%; margin:0 auto; padding: 3px 0 1px; float: right;} #header_form02_wrap_right_b input{ width: 100%;} /*---------------------------------------------------------------------------------------------- フォーム必須 ----------------------------------------------------------------------------------------------*/ .form__must{width:20%; box-sizing:border-box; background:#fff; font-weight:bold; float:left; margin:5px 0 10px; padding:0; border:4px solid #333; border-right:none; height:50px;} .form__must p {background:#f00; color:#fff; padding:2px; margin: 9px 0 0!important; text-align: center; font-size: 3vw!important;} .form__must_box{border-left:none!important;width:80%!important;height:50px!important;box-sizing:border-box!important; } /*---------------------------------------------------------------------------------------------- Styles for#close__img ----------------------------------------------------------------------------------------------*/ .close__img{ width:100%; position: relative;} .close__img_text{ width:100%; height:100%; position:absolute; background-color: rgba(0, 0, 0, 0.8); z-index:999;} .close__img_text h1 { width:90%; margin:30px auto 0; font-size:2.5rem; line-height:1.3; color:#FFF; text-align:center; font-weight:bold; text-shadow: 5px 5px 3px #333,-5px 5px 3px #333,5px -5px 3px #333,-5px -5px 3px #333;} /*---------------------------------------------------------------------------------------------- Styles for #footer__attention ----------------------------------------------------------------------------------------------*/ #footer__attention{ width:100%; background-color: #FFF;} #footer__attention p{ width:90%; margin: 0 auto 40px;font-size:14px;font-size:1.1rem; color: #666;} /*---------------------------------------------------------------------------------------------- Styles for footer ----------------------------------------------------------------------------------------------*/ footer {width:100%; height:auto;margin:0 auto; background-color: #ecf0ee;} #footer__inner {width: 90%;margin:0 auto;padding: 30px 0 150px; font-size:11px; font-size:1.1rem;} #footer__inner_logo {width: 40%; margin: 0 auto; padding:0 0 20px;} #footer__inner_right {width:100%; margin:0 auto;} #footer__inner li {float: left;margin-right: 15px;list-style-type: none;padding-right: 10px;} #footer__inner p {text-align: left;clear: both;padding-top: 5px; color:#666;} }