@charset "utf-8";
/* ===================================================================
CSS information
 file name  :  top_en.css
 style info :  英語設定
=================================================================== */
/* TOP visual Slider */
#main_visual     { margin: 50px auto; margin-top: 0; width: 100%; }
#main_visual img { width: 100%; }
/* お知らせ ＆ キャンペーン */
#top_news                { margin: 50px auto; padding: 20px 40px; width: 1400px; }
#top_news .news_title    { position: relative; border-bottom: solid 1px #b07c1f; }
#top_news .news_title h2 { font-weight: 500; }
#top_news .news_title .round_btn   { position: absolute; top: 0; right: 0; background: transparent; width: auto; }
#top_news .news_title .round_btn a { color: #000; font-size: 1rem; }
#top_news .news_title .round_btn a::before { color: #7b591b; font-size: 1rem; vertical-align: 0; padding-right: .5em; }
#top_news .news_lists    { margin: 40px auto 0 auto; width: 900px; }
#top_news .news_lists dl { font-size: 1.25rem; }
#top_news .news_lists dt { position: relative; width: 284px; padding: 1em 0; font-weight: normal; float: left; clear: left; }
#top_news .news_lists dt::before         { content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 700; color: #7b591b; padding-right: .5em; }
#top_news .news_lists dt.campaign::after { display: inline-block; text-align: center; content: 'Campaign'; white-space: pre; font-size: 75%; color: #ff9000; border: 1px solid #ff9000; margin-left: 1em; padding: .3em 0; vertical-align: .3em; width: 104px; }
#top_news .news_lists dt.notice::after   { display: inline-block; text-align: center; content: 'News'; white-space: pre; font-size: 75%; color: #0c92f3; border: 1px solid #0c92f3; margin-left: 1em; padding: .3em; vertical-align: .3em; width: 104px; }
#top_news .news_lists dd { padding: 1em 0; line-height: 1.5; border-bottom: 1px dotted #b07c1f; }
/* TOP各種サービス */
#top_services       { margin: 50px auto; width: 100%; }
#top_services h2    { /*font-weight: 500;*/ }
#top_services h3    { font-weight: 500; }
#top_services p     { font-size: 1rem; line-height: 1.5; }
#top_services .read { text-align: center; font-size: 1.25rem; }
/* 初回お試しサービス */
#top_services #trial            { margin: 0 auto; padding: 60px 740px 40px 40px; width: 1400px; height: 460px; background: #fff7eb url(/common/img/top/top_trial_img.png) right no-repeat; }
#top_services #trial h2         { color: #b07c1f; }
#top_services #trial .round_btn { background: #b07c1f; margin-top: 50px; }
/* レギュラーサービス */
#top_services #regular            { margin: 0 auto; padding: 60px 740px 40px 40px; width: 1400px; height: 460px; background:url(/common/img/top/top_regular_img.png) right no-repeat; }
#top_services #regular h2         { color: #7b591b; }
#top_services #regular .round_btn { background: #7b591b; margin-top: 50px; }
/* ラグジュアリーサービス */
#top_services #luxury            { margin: 0 auto; padding: 60px 740px 40px 40px; width: 1400px; height: 510px; background: #f0f0f0 url(/common/img/top/top_luxury_img.png) right no-repeat; }
#top_services #luxury h2         { color: #2c2c2c; }
#top_services #luxury .read      { margin-bottom: .25rem; }
#top_services #luxury h3         { font-size:2rem;}
#top_services #luxury .round_btn { background: #2c2c2c; margin-top: 50px; }
/* スポットサービス */
#top_services #spot_disinfection       { margin: 50px auto; width: 1400px; }
#top_services #spot_disinfection p     { padding: 0 40px; }
#top_services #spot_disinfection .read { color: #7b591b; margin-bottom: 0; }
#top_services #spot_disinfection #spot,
#top_services #spot_disinfection #disinfection            { margin-top: 50px; padding-top: 340px; width: 700px; float: left; }
#top_services #spot_disinfection #spot                    { background: url(/common/img/top/top_spot_img.png) top no-repeat; }
#top_services #spot_disinfection #disinfection            { background: url(/common/img/top/top_disinfection_img.png) top no-repeat; }
#top_services #spot_disinfection #spot h3                 { padding: 1rem 0; color: #fff; background: #ea7900; }
#top_services #spot_disinfection #spot .round_btn         { background: #ea7900; }
#top_services #spot_disinfection #disinfection h3         { padding: 1rem 0; color: #fff; background: #00886d; }
#top_services #spot_disinfection #disinfection .round_btn { background: #00886d; }
#top_services #spot_disinfection #spot p,
#top_services #spot_disinfection #disinfection p          { margin: 40px 0; }
/* クラシニティ コンセプト */
#concept           { margin: 0 auto; width: 1400px; background: #f9f4ea; position: relative; }
#concept p         { font-size: 1.5rem; line-height: 2; }
#concept .logo     { width: 700px; margin: 40px 0; float: left; padding-left: 40px; }
#concept .logo img { width: 100%; background: #fff; padding: 50px 95px; }
#concept p         { width: 700px; position: absolute; padding-left: 40px; padding-right: 40px; right: 0; top: 50%; transform: translateY(-50%); }
/* マイスタープログラム */
#meister           { margin: 0 auto; padding: 40px 0; width: 1400px; color: #c8a063; background: #000; }
#meister .logo     { width: 700px; float: left; text-align: center; }
#meister .read     { width: 700px; float: right; padding-left: 40px; padding-right: 40px; border-left: solid 2px #c8a063; }
#meister .read img { width: 580px; padding-left: 4px; }
#meister .read p   { border-top: solid 1px #c8a063; font-size: 1.5rem; margin-top: 1rem; padding: 1rem 0; }
#meister .round_btn           { margin: 0 auto; /*width: 180px;*/ height: 40px; text-align: center; background: #c8a063; border-radius: 20px; }
#meister .round_btn a         { display: block; line-height: 40px; width: 100%; font-weight: 400; font-size: 20px; text-decoration: none; color: #000; }
#meister .round_btn a::before { content: '\f054'; font-size: 20px; font-family: 'Font Awesome 5 Free'; font-weight: 700; vertical-align: 0em; padding-right: .25em; }
/* ==ここまで PC設定============================================= */

@media only screen and (max-width: 768px) {
/* TOP visual Slider */
#main_visual            { margin: 0 auto; margin-top: 0; width: 100%; }
#main_visual img        { width: 100%; }
/* お知らせ ＆ キャンペーン */
#top_news    { margin: 15vw auto 10vw auto; padding: 0; width: 100%; }
#top_news h2 { margin: 0 0 .5em 3vw; font-size: 5vw; text-align: left; }
#top_news .news_title .round_btn   { height: 7vw; background: #7b591b; right: 3vw; }
#top_news .news_title .round_btn a { padding: 0 3vw; line-height: 7vw; font-size: 3vw; color: #fff; }
#top_news .news_title .round_btn a::before { font-size: 3.5vw; color: #fff; } 
#top_news .news_lists    { margin: 3vw auto; width: 100%; }
#top_news .news_lists dl { font-size: 3.5vw; margin-bottom: 0; }
#top_news .news_lists dt { width: 100%; padding: 2vw 3vw; float: none; }
#top_news .news_lists dt.campaign::after { content: 'Campaign'; font-size: 85%; margin-left: 1em; padding: .3em .5em; vertical-align: .1em; width: 30%; }
#top_news .news_lists dt.notice::after   { content: 'News'; font-size: 85%; margin-left: 1em; padding: .3em; vertical-align: .1em; width: 30%; }
#top_news .news_lists dd { padding: .5em 3vw; }
/* TOP各種サービス */
#top_services       { margin: 0 auto; width: 100%; }
#top_services h2    { /*font-weight: 500;*/ }
#top_services h3    { font-weight: 500; }
#top_services p     { font-size: 3vw; line-height: 2; }
#top_services .read { text-align: center; font-size: 4vw; line-height: 1.5; }
/* 初回お試しサービス */
#top_services #trial            { margin: 0 auto; padding: 65.714286% 3vw 5vw 3vw; width: 100%; height: auto; background: #fff7eb url(/common/img/top/top_trial_img_sp.png) top no-repeat; background-size: contain; }
#top_services #trial h2         { margin: 1em 0; color: #b07c1f; }
#top_services #trial .round_btn { background: #b07c1f; margin-top: 5vw; }
/* レギュラーサービス */
#top_services #regular            { margin: 0 auto; padding: 65.714286% 3vw 5vw 3vw; width: 100%; height: auto; background: url(/common/img/top/top_regular_img_sp.png) top no-repeat; background-size: contain; }
#top_services #regular h2         { margin: 1em 0; color: #7b591b; }
#top_services #regular .round_btn { background: #7b591b; margin-top: 5vw; }
/* ラグジュアリーサービス */
#top_services #luxury            { margin: 0 auto; padding:  72.857% 3vw 5vw 3vw; width: 100%; height: auto; background: #f0f0f0 url(/common/img/top/top_luxury_img_sp.png) top no-repeat; background-size: contain; }
#top_services #luxury h2         { margin: 1em 0; color: #2c2c2c; }
#top_services #luxury .read      { margin-bottom: .5em; }
#top_services #luxury .read span { font-size: 150%; }
#top_services #luxury .round_btn { background: #2c2c2c; margin-top: 5vw; }
/* スポットサービス */
#top_services #spot_disinfection       { margin: 0 auto; width: 100%; }
#top_services #spot_disinfection h2    { margin: 1em 0; }
#top_services #spot_disinfection p     { padding: 0 3vw; }
#top_services #spot_disinfection .read { color: #7b591b; margin-bottom: 1em; }
#top_services #spot_disinfection #spot,
#top_services #spot_disinfection #disinfection            { margin-top: 0; padding-top: 48.57%; width: 100%; float: none; }
#top_services #spot_disinfection #spot                    { background: url(/common/img/top/top_spot_img.png) top no-repeat; background-size: contain; }
#top_services #spot_disinfection #disinfection            { background: url(/common/img/top/top_disinfection_img.png) top no-repeat; background-size: contain; }
#top_services #spot_disinfection #spot h3                 { padding: 1em 0; color: #fff; background: #ea7900; }
#top_services #spot_disinfection #spot .round_btn         { background: #ea7900; }
#top_services #spot_disinfection #disinfection h3         { padding: 1em 0; color: #fff; background: #00886d; }
#top_services #spot_disinfection #disinfection .round_btn { background: #00886d; }
#top_services #spot_disinfection #spot .round_btn,
#top_services #spot_disinfection #disinfection .round_btn { margin: 2em auto; }
#top_services #spot_disinfection #spot p,
#top_services #spot_disinfection #disinfection p          { margin: 2em 0; }
/* クラシニティ コンセプト */
#concept           { margin: 0 auto; width: 100%; background: #f9f4ea; position: relative; text-align: center; }
#concept p         { font-size: 3vw; line-height: 2; }
#concept .logo     { width: 100%; margin: 0; float: none; padding: 6vw; }
#concept .logo img { width: 100%; background: #fff; padding: 6vw 12vw; }
#concept p         { width: 100%; position: static; margin: 0; padding: 0 1em 2em 1em; top: 0%; transform: translateY(0%); }
/* マイスタープログラム */
#meister           { margin: 0 auto; padding: 6vw; width: 100%; color: #c8a063; background: #000; }
#meister .logo     { width: 100%; float: none; padding: 0 0 6vw 0; text-align: center; }
#meister .logo img { width: 100%; }
#meister .read     { width: 100%; float: none; padding-left: 0; padding-right: 0; border-left: none; }
#meister .read img { width: 95%; padding-left: 0; }
#meister .read p   { border-top: solid 1px #c8a063; font-size: 3.8vw; margin-top: 1em; padding: 1em 0; }
#meister .round_btn           { width: 54vw; height: 12vw; border-radius: 6vw; }
#meister .round_btn a         { display: block; line-height: 12vw; width: 100%; font-weight: 400; font-size: 3.8vw; text-decoration: none; color: #000; }
#meister .round_btn a::before { content: '\f054'; font-size: 5.5vw; font-family: 'Font Awesome 5 Free'; font-weight: 700; vertical-align: -.4vw; padding-right: 2vw; }
}

@media only screen and (max-width: 400px) {
#pasona_banner .little a            { margin-right: 0; width: 47%; float: left; }
#pasona_banner .little a img        { width: 100%; }
#pasona_banner .little a:last-child { float: right; margin-right: 0; }
}
/* ==ここまで SP設定============================================= */