@charset "UTF-8";

/*--基本1200px幅/zen丸ゴシック(500)/font-size:62.5%/--*/

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-size: 62.5%;
  }
body {
    font-family:"Zen Maru Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Gothic Pro", "メイリオ", Meiryo, Osaka, "游ゴシック", "Yu Gothic", sans-serif;
    color: #333;
    font-weight: 500;
}
img,video {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a,a:visited {
    color: #333;
}
#container {
    overflow: hidden;
}

/*--br(レスポンシブで出現)--*/
/*--920px--*/
.sp-br {
    display: none;
}
/*--640px--*/
.w640-br {
    display: none;
}
/*--390px--*/
.ps-br {
    display: none;
}

/*--header--*/

.company_name {
    display: flex;
    align-items: flex-end;
}
header h1 {
    padding: 0 1rem 0.3rem;
    font-size: 2.5rem;
    font-weight: 600;
}
.company_name_text {
	padding: 0.7rem 0;
	font-size: 1.4rem;
}
.tel_text_parent {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.tel_text {
    display: flex;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 1.4rem;
}
.tel {
    padding-left: 1rem;
    padding-bottom: 0.3rem;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
}
.header_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}
header nav {
    height: 6.5rem;
    background: #00CCCC;
}
.nav_parent {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1200px;
    width: 50%;
    height: 100%;
    align-items: center;
}
.nav_parent a {
    font-size: 1.6rem;
    color: #FFF;
}

/*--hamburger-menu(レスポンシブで出現)--*/

.openbtn {
    display: none;
}

/*--tel_img(レスポンシブで出現・消失)--*/

.tel_img {
    display: none;
}

/*--main--*/

/*--main_visual--*/

.slick__bg {
    background-size: cover;
    background-repeat: no-repeat;
    height: 490px;
    background-position: 50%;
}
.slick__bg01 {
    background-image: url(../images/family02.jpg);
}
.slick__bg02 {
    background-image: url(../images/family.jpg);
}
.main_visual {
    margin-top: 4rem;
}

/*--main_visual(480px以下で出現)--*/

.main_visual_480 {
    display: none;
}
.slick__bg480 {
    background-size: cover;
    background-repeat: no-repeat;
    height: 370px;
    background-position: 50%;
}
.slick__bg01_480 {
    background-image: url(../images/family03.jpg);
}
.slick__bg02_480 {
    background-image: url(../images/family04.jpg);
}

/*--concept　エヌ・ワイ設計室とは--*/

.concept_parents {
    position: relative;
}
.concept_parents h3 {
    padding: 4rem 0;
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
}
.company_text {
    position: absolute;
    left: 50%;
    top: 27%;
    transform: translate(-50%,-75%);
    font-size: 1.6rem;
    line-height: 3;
    text-align: center;
    width: 720px;
}
.concept_photo {
    margin-top: 13rem;
}
.concept_photo img {
    width: 100%;        /* 画像の幅を親要素に合わせて100%に設定 */
}


/*--section(topページのみ)--*/

section {
    height: 600px;
}

/*--section全体--*/

.bg_color {
    background: #DCF7F7;
}
.section_box {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}
section h3 {
    padding: 4rem 0;
    font-size: 2.2rem;
    font-weight: 600;
    text-align: center;
}
section h4 {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
}
.sub_title {
    padding: 1.3rem 0;
}

/*--エヌ・ワイ設計室の強み--*/

.merit_point {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    position: relative;
}
.merit_point::after {
    content: '';
    position: absolute;
    width: 42%;
    height: 37rem;
    background: #ecfefe;
    right: 26%;
    top: 17%;
    z-index: -1;
}
.merit_point_child {
    padding: 13rem 4rem 0 4rem;
}
.check_flx {
    display: flex;
    align-items: center;
}
.merit_title {
    padding: 0 1rem;
    font-size: 1.8rem;
    font-weight: 600;
}
.paragraph {
    padding-left: 6.5rem;
    font-size: 1.6rem;
    line-height: 1.8;
}
.check_box {
    padding: 1rem 0;
}
.merit_img {
    width: 550px;
}

/*--section2--*/


.news {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
}
.news img {
    border: dotted 2px #00CCCC;
}
.news_child {
    padding: 0 2.5rem;
    display: flex;
    flex-direction: column;
}
.news_text {
    padding: 2rem 2rem;
    font-size: 1.6rem;
    line-height: 1.8;
    height: 150px;
    background: #00CCCC;
    color: #FFF;
}
.news_text a {
    color: #FFF;
}
.date {
    letter-spacing: 0.2rem;
}



/*--section4--*/

.land_building_child {
    margin: 5rem auto;
    display: flex;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    position: relative;
}
.question {
    padding: 0 1.5rem;
}
.speech_bubble {
    width: 400px;
}
.question_text {
    position: absolute;
    top: 6%;
    left: 49%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8;
}
.question_point {
    position: absolute;
    top: 51%;
    left: 49%;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #00918D;
}

/*--ふきだし（レスポンシブで出現・置き換え）--*/

.responsive_question {
    display: none;
}

/*--section4のボタンデザイン--*/

.button_style {
    max-width: 1200px;
    width: 100%;
    text-align: center;
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
.btn,
a.btn,
button.btn {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.8;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
}
a.btn-flat {
    overflow: hidden;
    padding: 1.5rem 6rem;
    color: #fff;
    border-radius: 0;
    background: #000;
}
a.btn-flat span {
    position: relative;
}
a.btn-flat:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 500%;
    content: "";
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
    transform: translateX(-98%) translateY(-25%) rotate(45deg);
    background: #ffbc00;
}
a.btn-flat:hover:before {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
    transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

/*--会社案内（全頁共通）--*/

.profile_parents {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
}
hr {
    width: 80%;
}
.profile_child {
    padding: 4rem;
    line-height: 2;
}
.profile_title {
    padding: 0.5rem 0;
    font-weight: 600;
}
.company_description {
    height: 997px;
}
.company_child {
    padding: 0 4rem;
}
.company_info5 {
    padding-bottom: 2rem;
    display: flex;
    align-items: flex-end;
}
.company_name_child {
    padding: 0 1rem 0.3rem;
    font-size: 2.5rem;
    font-weight: 600;
}
.company_parent {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    padding-bottom: 3rem;
}
.company_photo img{
    width: 550px;
    border-radius: 41% 39% 50% 40%/42% 49% 52% 54%;
    border: dotted 2px #00CCCC;
}
.company_table {
    font-size: 1.6rem;
}
.company_table tr,th {
    text-align: left;
}
.company_table td{
    padding: 1rem 2rem;
    line-height: 1.6;
}
.company_table th{
    font-weight: 600;
}
.access_text{
    padding-top: 2rem;
    font-size: 1.6rem;
    line-height: 1.6;
}
.access_method {
    font-weight: 600;
}


/*--footer--*/

footer {
    background: #00CCCC;
}
footer h2 {
    padding: 0 1rem 0.3rem;
    font-size: 2.5rem;
    font-weight: 600;
}
.footer_plus {
    padding: 1rem 0;
}
.copyright {
    padding-bottom: 1rem;
    text-align: center;
    font-size: 1.6rem;
    color: #FFF;
}
.sitemap {
    padding: 4.5rem 3.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 311px;
}
.sitemap li {
    padding-top: 1rem;
}
.sitemap a {
    font-size: 1.6rem;
    color: #FFF;
}
.footer_box{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/*--page top--*/

.button_top:visited {
    color: #FFF;
}
.button_top {
    background: #FFBC00;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    right: 30px;
    bottom: 30px;
}
.button_top::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-top: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(-45deg);
}

/*--パンくずリスト--*/

.breadcrumbs_list {
    padding-top: 2rem;
    font-size: 1.6rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/*--property_list.html--*/

.start_property_list {
    font-size: 1.6rem;
    height: 583px;
}
.property_list_parent {
    font-size: 1.6rem;
    height: 550px;
}
.first-img img {
    width: 320px;
}
.photo_middle_flx {
    display: flex;
}
.photo_middle_flx img {
    width: 160px;
}
.property_list_photo {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.property_list_photo img {
    border: 1px solid #cdcdcd;
}
.property_list_photo p {
    padding: 1rem;
}
.property_list_bg {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    background: #FFF;
    border: 2px dotted #00CCCC;
}
.under {
    border-bottom: solid 3px #00CCCC;
}
.property_list_title {
    padding: 1rem 2rem;
    background: #FFF;
}
.property_list_body {
    padding: 1rem 2rem;
    background: #FFF;
}
.property_list_table td {
    padding: 1rem 1.8rem;
    line-height: 1.2;
}
.property_list_table td {
    border-bottom: 2px solid #c9c9c9;
}
.property_list_table {
    border-collapse: collapse;
}
.property_list_table th {
    font-weight: 600;
    border-bottom: 2px solid #c9c9c9;
}
.property_list_memo {
    padding: 1rem 0;
    line-height: 1.4;
    border-bottom: 2px solid #c9c9c9;
}
.red{
    color: red;
    font-weight: 600;
}

/*--2段目以降適用（property_list.html）--*/

.property_list_items {
    display: flex;
    align-items: center;
}

/*--property_detail.html--*/

.frame {
    border: 2px dotted #00CCCC;
}
.frame02 {
    margin: 2rem 0;
}
.property_detail_parents {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    height: auto;
    font-size: 1.6rem;
}
.place_name {
    padding: 1rem 0;
    text-align: center;
}
.detail_info {
    padding-top: 1rem;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}
.property_detail_feature {
    display: flex;
    align-items: center;
    justify-content: center;
}
.middle_title {
    padding-right: 2rem;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.4;
}
.property_detail_memo {
    line-height: 1.4;
}
.property_detail_text {
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 1200px;
    width: 100%;
    padding: 2rem 8rem;
}
.property_detail_table {
    margin: 1rem;
}
.table_child {
    width: 380px;
}
.property_detail_table th {
    border: 1px solid #333;
    padding: 1rem;
}
.property_detail_table td {
    border: 1px solid #333;
    padding: 0.8rem;
    line-height: 1.2;
}
.table_parents {
    width: 400px;
}
.table_parents th {
    padding: 1rem 1rem 1rem 0;
    border-bottom: 2px solid #c9c9c9;
}
.table_parents td {
    padding: 0.8rem;
    line-height: 1.2;
    border-bottom: 2px solid #c9c9c9;
}
.land_buidling_text {
    display: flex;
}
.table_title {
    padding-left: 1rem;
    font-weight: 600;
}
.iframe_each {
    padding-top: 1rem;
}

/*--slider(サムネイル付き)--*/

.photo_slider {
    padding: 2rem 0;
}
.slider {
    width: 35%;
    margin: 0 auto;
}
.slider-nav {
    width: 80%;
    margin: 30px auto 0 auto;
}
.slider img {
    border: 1px solid #cdcdcd;
}
.slider-nav .slick-list img {
    width: 100%;
    border: 1px solid #cdcdcd;
    margin-left: 1.6rem;
    margin-right: 1.6rem;
}
.prev-arrow {
    width: 40px;
    position: absolute;
    top: 38px;
    left: -64px;
}
.prev-arrow:hover {
	cursor: pointer;
}
.next-arrow {
    width: 40px;
    position: absolute;
    top: 38px;
    right: -64px;
}
.next-arrow:hover {
    cursor: pointer;
}

/*--land_building_selection.html--*/

.selection_section {
    height: auto;
    padding-bottom: 1rem;
}
.selection_section p {
    margin: 0 auto;
    max-width: 900px;
    width: 96%;
    font-size: 1.6rem;
    line-height: 1.5;
}
.selection_section h4 {
    margin: 2rem auto;
    max-width: 900px;
    width: 96%;
}

/*-- accordion menu --*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}
.accordion-area p {
    font-size: 1.6rem;
    line-height: 1.5;
}
.accordion-area li{
    margin: 10px 0;
}
.accordion-area section {
    height: auto;
    border: 2px solid #00CCCC;
}
/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}
/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #00CCCC;  
}
.title::before{
    top: 48%;
    left: 15px;
    transform: rotate(0deg);
}
.title::after{    
    top: 48%;
    left: 15px;
    transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
  transform: rotate(45deg);
}
.title.close::after{
  transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #F5F5F5;
    margin:0 3% 3% 3%;
    padding: 3%;
}

/*--contact.html--*/

.formwrap {
	width: 700px;
	margin: 0 auto;
	color: #555;
	font-size: 1.6rem;
}
.form_text {
    padding: 5rem 2rem;
    line-height: 1.4;
}
.formtable {
	width: 100%;
	margin: 2rem auto;
	border-collapse: collapse;
}
.formtable th {
	width: 36%;
	background: #EFEFEF;
	text-align: left;
    border: 1px solid #CCC;
	padding: 1rem;
    vertical-align: middle;
}
.formtable td {
	border: 1px solid #CCC;
	padding: 1rem;
}
.form_btn_parents {
    display: flex;
    justify-content: center;
}
.form_btn {
    padding: 0 2rem;
}
.form_btn input {
    padding: 0.5rem;
}
.form_bold {
    font-weight: 600;
}
.form_gap01 {
    padding-right: 2rem;
}
.form_gap02 {
    padding-right: 5rem;
}
.form_tel_mail {
    padding-bottom: 1rem;
}
.contact_parents {
    height: 800px;
}

/*--drawing_lesson.html--*/

.drawing_section {
    font-size: 1.6rem;
    text-align: center;
    height: auto;
}
.drawing_section p {
    line-height: 1.8;
}
.image_drawing img {
    width: 650px;
}
.drawing_text {
    padding: 2rem 0 4rem;
    display: inline-block;
    text-align: left;
}
.drawing_text_emphasis {
	display: inline-block;
    text-align: left;
	padding: 1rem;
	color: #ED1A3D;
}
.option_formtable {
    padding: 0 3rem;
}
.option_form_parent {
    padding: 6rem 3rem;
}
.option_form {
    padding: 1rem;
    line-height: 1.8;
    text-align: left;
}
.formtable {
    text-align: left;
}
.address_section {
    height: 400px;
}
.emphasis {
	text-align: center;
	color: #ED1A3D;
	font-size: 2.2rem;
	padding-bottom: 1rem;
}
.lesson_gaiyo {
	padding: 1rem 0;
}

/*--------------------------------
 slider_drawing
---------------------------------*/

.slider_drawing{
    display: none;
}
.slider_drawing.slick-initialized{
    display: block; 
}
.slick-prev {
    left: 400px;
    z-index: 1;
}
.slick-next {
    right: 400px;
}
.slider_drawing img {
    margin: 0 auto;
    max-width: 800px;
    height: auto;
    border: 1px solid #cdcdcd;
}
.slick-prev,.slick-next {
    width: 50px;
    height: 50px;
}
.slick-prev:before, .slick-next:before {
    color: #00CCCC;
    opacity: 1;/*デフォルトは.75が指定されている*/
    font-size: 50px;
}
.slick-dots {
    bottom: -40px;
}
.slick-dots li button:before {
    font-size: 15px;
}