﻿
/*===========================================
header
===========================================*/
#header {
}
#header a {
color: #36260c;
}
#header .header_wrapper {
padding: 0 2%;
border-bottom: 1px solid #e6e6e6;
}
#header .header_inner {
max-width: 100%;
margin: auto;
}
#header .header_block {
display: flex;
justify-content: space-between;
align-items: center;
/*flex-wrap: wrap;*/
height: 94px;
}
#header .header_logo {
margin-right: 15px;
flex-basis: 236px;
}
#header .header_logo img {
display: block;
max-width: 236px;
min-width: 155px;
width: 100%;
}
#header .header_menu {
display: none;
}
#header .header_nav {
display: flex;
}
#header .header_toggleBtn {
display: none;
position: relative;
}
#header .header_corporate {
display: none;
}
#header .header_nav .header_closeBtn {
display: none;
}
#header .header_nav .header_globalBtn {
display: none;
}
#header .header_nav_list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
#header .header_nav_list .accordion {
display: none;
}
#header .header_nav_list li {
display: flex;
align-items: center;
font-size: 1.3rem;
}
#header .header_nav_list li + li:before {
content: "/";
margin: 0 0.5em;
}
#header .header_nav_list li a {
display: inline-block;
text-align: center;
}
#header .header_nav_list .header_nav_list_news a {
white-space: nowrap;
}
#header .header_contact {
margin-left: 2em;
font-size: 1.3rem;
}
#header .header_contact a {
position: relative;
display: block;
padding: 0.5em 18px 0.5em 18px;
color: #FFF;
white-space: nowrap;
background-color: #36260c;
}
#header .header_contact span {
display: inline-block;
position: relative;
padding-left: 28px;
}
#header .header_contact span:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 17px;
height: 13px;
margin: auto;
background: url("../image/icon_mail.png") top left no-repeat;
background-size: contain;
}
#header .header_brand {
display: none;
}
#header .header_store {
display: none;
}

@media only screen and (max-width: 767px) {
#header .header_wrapper {
padding: 0;
}
#header .header_block {
justify-content: flex-start;
flex-wrap: wrap;
height: auto;
padding: 0 15px;
}
#header .header_logo {
order: 2;
flex-basis: 155px;
margin-left: 15px;
}
#header .header_menu {
order: 1;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
#header .header_nav {
flex-wrap: wrap;
box-sizing: border-box;
display: block;
position: relative;
width: 82.5%;
min-height: 100vh;
padding: 0 0 3em 0;
background-color: #f8f4ec;
z-index: 1;
}
#header .header_nav > * {
flex-basis: 100%;
}
#header .header_toggleBtn {
display: block;
}
#header .header_toggleBtn p {
width: 18px;
height: 16px;
}
#header .header_toggleBtn a {
display: block;
position: relative;
width: 100%;
height: 100%;
white-space: nowrap;
text-indent: -9999px;
overflow: hidden;
z-index: 1;
}
#header .header_toggleBtn p:after, #header .header_toggleBtn a:before, #header .header_toggleBtn a:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 2px;
margin: auto;
background-color: #36260c;
}
#header .header_toggleBtn a:before {
top: 0;
bottom: auto;
}
#header .header_toggleBtn a:after {
top: auto;
bottom: 0;
}
#header .header_corporate {
display: block;
}
#header .header_nav .header_closeBtn {
display: block;
}
#header .header_nav .header_closeBtn a {
display: block;
width: 50px;
height: 50px;
text-indent: -9999px;
overflow: hidden;
background: url("../image/icon_close.png") center no-repeat;
background-size: 15px;
}
#header .header_nav .header_globalBtn {
display: block;
position: absolute;
top: 0;
right: 0;
}
#header .header_nav .header_globalBtn a {
display: block;
width: 50px;
height: 50px;
text-indent: -9999px;
overflow: hidden;
background: url("https://www.tutuanna.co.jp/cms/tutuanna/common/images/icon_global.png") center no-repeat;
background-size: 18px;
}
#header .header_nav_list {
flex-wrap: wrap;
border-bottom: 1px solid #FFF;
}
#header .header_nav_list li {
display: block;
position: relative;
flex-basis: 100%;
border-top: 1px solid #FFF;
}
#header .header_nav_list li + li:before {
content: normal;
}
#header .header_nav_list li a {
display: block;
padding: 0.75em 1em;
font-size: 1.6rem;
font-weight: bold;
text-align: left;
}
#header .header_nav_list .accordion .accordion_ttl {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 3em;
font-size: 1.6rem;
text-indent: -9999px;
overflow: hidden;
}
#header .header_nav_list .accordion .accordion_ttl:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 15px;
width: 10px;
height: 10px;
margin: auto;
background: url("../image/icon_plus.png") right center no-repeat;
background-size: contain;
}
#header .header_nav_list .accordion.open .accordion_ttl:after {
background-image: url("../image/icon_minus.png");
}
#header .header_nav_list .accordion .accordion_ttl p {
height: 100%;
}
#header .header_nav_list .accordion .accordion_ttl a {
display: block;
height: 100%;
padding: 0;
}
#header .header_nav_list .accordion ul {
padding: 1em 0;
background: #FFF;
}
#header .header_nav_list .accordion .accordion_data a {
padding-left: 2em;
font-size: 1.5rem;
font-weight: normal;
}
#header .header_brand {
display: block;
margin-top: 1.5em;
text-align: center;
}
#header .header_brand a {
font-size: 1.5rem;
}
#header .header_store {
display: block;
margin-top: 1em;
text-align: center;
}
#header .header_store a {
font-size: 1.5rem;
}
#header .header_contact {
max-width: 270px;
margin: 10% auto 0 auto;
text-align: center;
}
#header .header_contact a {
padding: 1em 1em;
font-size: 1.5rem;
}
#nav {
transform: translateX(-100%);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
overflow: auto;
z-index: 101;
}
#nav.anm {
transition: transform 0.5s ease;
}
.menuOpen {
position: fixed;
}
.menuOpen #header:after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 100;
}
.menuOpen #nav {
transform: translateX(0);
}
.menuOpen #header .header_nav_list .accordion {
display: block;
}
}
/*===========================================
footer
===========================================*/
#footer {
position: relative;
color: #36260c;
}
#footer a {
color: #36260c;
}
#footer .footer_wrapper {
padding: 0 5%;
border-top: 1px solid #ede7da;
background-color: #f8f4ec;
}
#footer .footer_inner {
max-width: 1000px;
margin: auto;
}
#footer .footer_pageTop {
transform: translateY(-100%);
position: absolute;
top: -10px;
right: 10px;
bottom: auto;
z-index: -1;
}
#footer .footer_pageTop.fix {
transform: translateY(0);
position: fixed;
top: auto;
bottom: 10px;
}
#footer .footer_pageTop a {
display: block;
position: relative;
width: 6vw;
height: 6vw;
max-width: 80px;
max-height: 80px;
border-radius: 40px;
white-space: nowrap;
text-align: left;
text-indent: -9999px;
background-color: rgba(54,38,12,0.7);
overflow: hidden;
}
#footer .footer_pageTop a:after {
transform: rotate(-45deg);
content: "";
display: block;
position: absolute;
top: 13%;
bottom: 0;
left: 0;
right: 0;
width: 1.5vw;
height: 1.5vw;
max-width: 20px;
max-height: 20px;
margin: auto;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#footer .footer_pageTop.anm {
z-index: 1;
}
#footer .footer_pageTop.show {
z-index: 1;
}
#footer .footer_pageTop a {
transition: opacity 0.3s ease;
opacity: 0;
}
#footer .footer_pageTop.show a {
opacity: 1;
}
#footer .footer_relation {
display: none;
border-top: 2px solid #af7819;
}
#footer .footer_relation li + li {
border-top: 1px solid #e6e6e6;
}
#footer .footer_relation a {
display: block;
padding: 1.2em 5%;
font-weight: bold;
}
#footer .footer_link {
padding-top: 6%;
display: flex;
justify-content: space-between;
}
#footer .footer_link_contents {
display: flex;
flex-basis: 81.6%;
justify-content: space-between;
}
#footer .footer_link_contents > * {
flex: 1;
}
#footer .footer_link .footer_link_btn {
display: flex;
align-items: center;
width: 100%;
margin: 0 0 3em 0;
font-size: 1.3rem;
font-weight: normal;
}
#footer .footer_link .footer_link_btn a {
flex: 1;
display: block;
padding: 0.5em 0;
color: #FFF;
text-align: center;
background-color: #36260c;
}
#footer .footer_link_column p {
margin-right: 1em;
font-size: 1.4rem;
font-weight: bold;
}
#footer .footer_link_column ul + p {
margin-top: 2em;
}
#footer .footer_link_column p + p {
margin-top: 1.5rem;
}
#footer .footer_link_column ul {
margin-top: 1.5em;
margin-right: 1em;
}
#footer .footer_link_column li {
font-size: 1.2rem;
}
#footer .footer_link_column li + li {
margin-top: 0.5em;
}
#footer .footer_inquiry {
flex-basis: 18.4%;
}
#footer .footer_inquiry p {
font-weight: normal;
white-space: nowrap;
}
#footer .footer_info {
width: 100%;
padding-top: 3.5%;
padding-bottom: 3%;
font-size: 1.1rem;
}
#footer .footer_info:after {
content: "";
display: block;
clear: both;
}
#footer .footer_info .footer_privacy, #footer .footer_info .footer_terms {
float: left;
}
#footer .footer_info .footer_terms p:before {
content: "/";
display: inline;
margin: 0 1em;
}
#footer .footer_info .footer_copyright {
float: right;
}

@media only screen and (max-width: 767px) {
#footer .footer_pageTop a {
width: 40px;
height: 40px;
}
#footer .footer_pageTop a:after {
width: 10px;
height: 10px;
}
#footer .footer_relation {
display: block;
}
#footer .footer_link {
flex-wrap: wrap;
justify-content: center;
padding-top: 2em;
}
#footer .footer_link_contents {
order: 1;
flex-basis: auto;
display: block;
width: 100%;
text-align: left;
}
#footer .footer_link_column {
display: inline;
}
#footer .footer_link_contents .footer_link_column p {
display: inline;
margin: 0;
font-size: 1.2rem;
font-weight: normal;
}
#footer .footer_link_column p:before {
content: "/";
margin: 0 0.25em;
}
#footer .footer_link_column ul + p {
margin: 0;
}
#footer .footer_link_column ul {
display: none;
}
#footer .footer_link_column.footer_strength p:before {
content: normal;
}
#footer .footer_inquiry {
order: 0;
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
margin: 0 0 10% 0;
}
#footer .footer_inquiry > * {
flex-basis: 100%;
margin: 0;
font-size: 1.5rem;
text-align: center;
}
#footer .footer_inquiry a {
font-size: 1.5rem;
}
#footer .footer_inquiry p:before {
content: normal;
}
#footer .footer_inquiry .footer_brand {
order: 0;
}
#footer .footer_inquiry .footer_store {
order: 1;
margin-top: 1em;
}
#footer .footer_inquiry .footer_contact {
order: 2;
max-width: 270px;
margin: 2em auto 0 auto;
}
#footer .footer_inquiry .footer_global {
display: none;
}
#footer .footer_link .footer_link_btn a {
padding: 0.75em 0;
}
#footer .footer_info {
padding: 10% 0;
}
#footer .footer_info .footer_privacy, #footer .footer_info .footer_terms {
display: none;
}
#footer .footer_info .footer_copyright {
float: none;
text-align: center;
}
}
/*===========================================
contents
===========================================*/
.contents {
position: relative;
padding: 0 0 6.6em 0;
}

@media only screen and (max-width: 767px) {
.contents {
padding: 0 0 60px 0;
}
}
/*===========================================
module
===========================================*/
.topicPath {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
padding: 0 5%;
}
.topicPath .topicPath_inner {
max-width: 1000px;
margin: auto;
padding: 3em 0 2em 0;
}
.topicPath ul {
display: flex;
flex-wrap: wrap;
}
.topicPath li {
position: relative;
margin-right: 10px;
font-size: 1.2rem;
color: #36260c;
}
.topicPath li + li {
padding-left: 16px;
}
.topicPath li + li:before {
transform: translateX(-25%) rotate(45deg);
content: "";
display: block;
position: absolute;
top: 0.5em;
left: 0;
width: 6px;
height: 6px;
border-top: 1px solid #af7819;
border-right: 1px solid #af7819;
}
.topicPath a {
color: #36260c;
text-decoration: underline;
}
.topicPath a:hover {
text-decoration: none;
}

@media only screen and (max-width: 767px) {
.topicPath .topicPath_inner {
padding: 0 0 1em 0;
}
}
/*===========================================
parts
============================================
└ title */
.ttl_1 {
padding: 2em 0;
font-size: 3.4rem;
line-height: 1.4;
font-weight: bold;
color: #36260c;
}
.ttl_1 > * {
font-weight: bold;
}
.ttl_2 {
border-bottom: 2px solid #DDD;
padding: 0.5em 0;
font-size: 1.4rem;
font-weight: bold;
}

@media only screen and (max-width: 767px) {
.ttl_1 {
padding: 1.6em 0;
font-size: 2.4rem;
}
}
/*----------------------------------------------------------------------
└ btn */
.btn_color_white a {
display: block;
position: relative;
border: 1px solid #af7819;
padding: 1em;
font-size: 1.4rem;
text-align: center;
white-space: nowrap;
color: #af7819;
}
.btn_color_khaki a {
display: block;
position: relative;
border: 1px solid #b48b49;
padding: 1em;
font-size: 1.4rem;
text-align: center;
white-space: nowrap;
color: #FFF;
background-color: #b48b49;
}
.btn_icon_next a:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 18px;
width: 13px;
height: 5px;
margin: auto;
background: url("../image/icon_next.png") left top no-repeat;
background-size: contain;
}
.btn_color_white.btn_icon_next a:after {
background-image: url("../image/icon_next.png");
}
.btn_color_khaki.btn_icon_next a:after {
background-image: url("../image/icon_next_white.png");
}

@media only screen and (min-width: 767px) {
.btn_color_white a:hover {
color: #FFF;
text-decoration: none;
background-color: #af7819;
}
.btn_color_khaki a:hover {
color: #af7819;
text-decoration: none;
background-color: #FFF;
}
.btn_color_white.btn_icon_next a:hover:after {
background-image: url("../image/icon_next_white.png");
}
.btn_color_khaki.btn_icon_next a:hover:after {
background-image: url("../image/icon_next.png");
}
}

@media only screen and (max-width: 767px) {
.btn_white a {
padding: 0.75em 1em;
font-size: 1.3rem;
}
.btn_khaki a {
padding: 0.75em 1em;
font-size: 1.3rem;
}
}
/*----------------------------------------------------------------------
└ accordion */
.accordion {
}
.accordion .accordion_data {
transition: height 0.5s ease;
height: 0;
overflow: hidden;
}
.accordion.open .accordion_data:not(.anm) {
height: auto;
}

/*===========================================
material
===========================================*/
@media only screen and (max-width: 767px) {
.pcOnly {
display: none !important;
}
}

@media only screen and (min-width: 767px) {
.spOnly {
display: none !important;
}
}
.block_wrap {
margin: 0 5%;
}
.block_wrap .block_inner {
max-width: 1000px;
margin: 0 auto;
}
/*----------------------------------------------------------------------
└ icon */
.icon_next {
display: inline-block;
position: relative;
padding-right: 20px;
}
.icon_next:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 11px;
height: 11px;
right: 0;
margin: auto;
background: url(../image/icon_next.png) top left no-repeat;
background-size: contain;
}
.icon_link {
display: inline-block;
position: relative;
padding-left: 16px;
}
.icon_link:before {
transform: translateX(-25%) rotate(45deg);
content: "";
display: inline-block;
position: absolute;
top: 0.5em;
width: 6px;
height: 6px;
left: 0;
border-top: 1px solid #af7819;
border-right: 1px solid #af7819;
}
.icon_blank {
position: relative;
margin-right: 5px;
}
.icon_blank:after {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin-left: 5px;
background: url(../image/icon_blank.png) top left no-repeat;
background-size: contain;
}
.icon_white {
position: relative;
margin-right: 5px;
}
.icon_white:after {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin-left: 5px;
background: url(https://www.tutuanna.co.jp/cms/tutuanna/common/images/icon_white.png) top left no-repeat;
background-size: contain;
}
.icon_mail {
position: relative;
padding-left: 25px;
}
.icon_mail:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 17px;
height: 13px;
left: 0;
margin: auto;
background: url(../image/icon_mail.png) top left no-repeat;
background-size: contain;
}

@media only screen and (max-width: 767px) {
.icon_white:after {
display:none;!important;
}
}

/*----------------------------------------------------------------------
└ txt */
.txt_block a {
color: #af7819;
text-decoration: underline;
}
.txt_block .icon_link {
display: inline;
margin-left: 5px;
padding-left: 0;
}
.txt_block .icon_link:before {
position: static;
margin-right: 5px;
}
/*----------------------------------------------------------------------
└ list */
.list_disc li {
text-indent: -1em;
padding-left: 1em;
}
.list_disc li:before {
content: "・";
}
.list_number {
counter-reset: count;
}
.list_number li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
counter-increment: count;
}
.list_number li:before {
content: counter(count) '：';
display: inline-block;
}
/*===========================================
template strength
===========================================*/
.is-pc {
display: block !important;
}
.is-sp {
display: none !important;
}
img {
max-width: 100%;
display: block;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.ttl_block {
margin: 2.5em 0 2em;
font-size: 3.6rem;
color: #36260c;
line-height: 2.17;
}
.ttl_block h1 {
font-weight: bold;
}
.block_text {
font-size: 1.6rem;
margin-bottom: 4em;
color: #36260c;
line-height: 2.25;
letter-spacing: -0.1px;
}
.block_thumb {
display: flex;
flex-wrap: wrap;
margin-bottom: 6em;
}
.block_thumb_item {
position: relative;
flex-basis: calc(((100% - 64px) - 1px) / 3);
margin-left: 32px;
margin-bottom: 30px;
}
.block_thumb_item:nth-child(3n + 1) {
margin-left: 0;
}
.block_thumb_item a {
display: block;
position: relative;
}
.block_thumb_overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.block_thumb_text {
font-size: 2rem;
font-weight: bold;
color: #ffffff;
margin: 0 5%;
text-align: center;
}
.h2_ttl {
font-size: 2.2rem;
font-weight: bold;
color: #36260c;
padding-bottom: 5px;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 60px;
}
.h3_ttl {
font-size: 2rem;
font-weight: bold;
margin-top: 1em;
margin-bottom: 2em;
color: #36260c;
}
.h4_ttl {
position: relative;
text-align: left;
padding: 5px 10px 10px 10px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1;
border-bottom: 1px solid #cbcbcb;
margin-bottom: 1em;
}
.h4_ttl:before {
content: "";
position: absolute;
background: #b48b49;
width: 2px;
height: 50%;
top: 5px;
left: 0;
}
.taL {
text-align: left !important;
}
.taR {
text-align: right !important;
}
.taC {
text-align: center!important;
}
.mb0 {
margin-bottom: 0 !important;
}
.mb05 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.mb80 {
margin-bottom: 80px !important;
}
.ml10 {
margin-left: 10px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mx-auto {
margin: 0 auto;
}
.flex-right {
display: flex;
justify-content: flex-end;
}
.w100pc {
width: 100%;
}
.link_arr {
position: relative;
display: block;
width: 370px;
font-size: 1.6rem;
color: #af7819;
text-align: center;
line-height: 1;
padding: 16px 0;
border: 1px solid #af7819;
}
.link_arr:visited, .link_arr:active {
color: #af7819;
background: #ffffff;
}
.link_arr:hover {
color: #ffffff;
text-decoration: none;
background: #af7819;
}
.link_arr:after {
content: "";
display: block;
position: absolute;
top: -3px;
bottom: 0;
right: 8px;
width: 13px;
height: 5px;
margin: auto;
background: url("../image/icon_next.png") left top no-repeat;
background-size: contain;
}
.link_arr:hover:after {
background: url("../image/icon_next_white.png") left top no-repeat;
background-size: contain;
}
.link_arr.icon_blank:after {
transform: none;
border-top: 0;
width: 10px;
height: 10px;
right: 10px;
background: url("../image/icon_blank1.png") top left no-repeat;
background-size: contain;
}
.link_arr.icon_white:after {
transform: none;
border-top: 0;
width: 10px;
height: 10px;
right: 10px;
background: url("https://www.tutuanna.co.jp/cms/tutuanna/common/strength/images/icon_white.png") top left no-repeat;
background-size: contain;
}
.link_arr.icon_blank:hover:after {
background: url("../image/icon_blank_white.png") top left no-repeat;
background-size: contain;
}
.col_2 {
display: flex;
}
.col_2_01, .col_2_02 {
width: 50%;
}
.step_block ul {
display: flex;
margin-left: 15px;
}
.step_block li {
width: calc(100% / 6);
height: 154px;
}
.step_item {
position: relative;
display: flex;
justify-content: center;
width: 80%;
height: 100%;
background: #a38757;
text-align: center;
padding-left: 15px;
padding-top: 20px;
border-radius: 10px;
}
.step_item:before {
content: "";
position: absolute;
top: 0;
right: -27px;
width: 30px;
height: 154px;
border-left: solid 30px #a38757;
border-bottom: solid 77px transparent;
border-top: solid 77px transparent;
border-radius: 10px;
}
.step_block li:last-child .step_item {
width: 90%;
padding-left: 0;
}
.step_block li:last-child .step_item:before {
display: none;
}
.step_item span {
width: 93px;
display: inline-block;
font-size: 1.6rem;
line-height: 1;
background: #ffffff;
color: #36260c;
border-radius: 12px;
font-weight: bold;
text-align: center;
padding: 7px 0 5px;
margin-bottom: 15px;
}
.step_item p {
font-size: 1.8rem;
line-height: 1.34;
color: #ffffff;
font-weight: bold;
letter-spacing: -1px;
white-space: nowrap;
position: relative;
}
.box {
padding: 50px;
border: 1px solid #e5e5e5;
margin-bottom: 30px;
}
.box_top {
display: flex;
}
.box_img {
width: 41%;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.box_text {
width: 59%;
padding-right: 10px;
box-sizing: border-box;
}
.box_ttl {
font-size: 1.8rem;
color: #36260c;
font-weight: bold;
margin-bottom: 35px;
}
.box_img02 {
padding: 0 0 30px 40px;
}

@media screen and (max-width: 767px) {
.is-pc {
display: none !important;
}
.is-sp {
display: block !important;
}
.ttl_block {
margin: 2.3em 0 2em;
font-size: 2.4rem;
line-height: 1.625;
}
.block_text {
font-size: 1.4rem;
line-height: 1.7;
}
.block_thumb {
margin-bottom: 4em;
}
.block_thumb_item {
flex-basis: 100%;
margin-left: 0;
margin-bottom: 30px;
}
.block_thumb_item img {
width: 100%;
}
.block_thumb_text {
font-size: 2.1rem;
}
.h2_ttl {
font-size: 1.9rem;
margin-bottom: 28px;
}
.h3_ttl {
font-size: 1.8rem;
}
.h4_ttl {
font-size: 1.6rem;
}
.mb0_sp {
margin-bottom: 0 !important;
}
.mb10_sp {
margin-bottom: 10px !important;
}
.mb20_sp {
margin-bottom: 20px !important;
}
.ml0_sp {
margin-left: 0 !important;
}
.mr0_sp {
margin-right: 0 !important;
}
.link_arr {
width: 100%;
font-size: 1.4rem;
padding: 13px 0;
}
.link_arr:hover {
color: #af7819;
background: #ffffff;
}
.link_arr.icon_blank:hover:after {
background: url("../image/icon_blank1.png") top left no-repeat;
background-size: contain;
}
.link_arr.icon_white:hover:after {
background: url("https://www.tutuanna.co.jp/cms/tutuanna/common/strength/images/icon_white.png") top left no-repeat;
background-size: contain;
}
.link_arr:hover:after {
background: url(../image/icon_next.png) left top no-repeat;
background-size: contain;
}
.col_2 {
flex-direction: column;
}
.col_2_01, .col_2_02 {
width: 100%;
}
.step_block ul {
margin-left: 0;
flex-direction: column;
}
.step_block li {
width: 100%;
height: auto;
margin-bottom: 50px;
}
.step_item {
width: 100%;
}
.step_item:before {
width: 100%;
height: 30px;
border-top: solid 40px #a38757;
border-left: solid 44vw transparent;
border-right: solid 44vw transparent;
border-bottom: 0;
left: 0;
right: 0;
top: inherit;
bottom: -39px;
}
.step_item {
padding-left: 0;
}
.step_block li:last-child .step_item {
width: 100%;
padding-bottom: 20px;
}
.step_item span {
width: 80px;
font-size: 1.4rem;
padding: 5px 0 3px;
}
.step_item p {
font-size: 1.6rem;
letter-spacing: 0;
}
.box {
padding: 15px;
margin-bottom: 15px;
}
.box_top {
flex-direction: column;
}
.box_img {
width: 100%;
}
.box_text {
width: 100%;
}
.box_ttl {
font-size: 1.6rem;
margin-bottom: 5px;
}
.box_img img, .box_img02 img {
margin: 0 auto;
}
.box_img02 {
padding: 0;
margin-bottom: 10px;
}
.fl, .fr {
float: none;
}
}

@media screen and (max-width: 500px) {
.step_item:before {
bottom: -38px;
}
}

@media screen and (max-width: 1023px) and (min-width: 767px) {
.step_block ul {
margin-left: 0;
}
.step_item {
padding-left: 10px;
}
.step_item span {
width: 68px;
font-size: 1.4rem;
}
.step_block li {
margin-right: 10px;
}
.step_block li:last-child {
margin-right: 0;
}
.step_item p {
font-size: 1.5rem;
white-space: nowrap;
position: relative;
z-index: 1;
padding-left: 5px;
}
.box_ttl {
margin-bottom: 10px;
}
}
