@charset "utf-8";
/* CSS Document */

/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
pre,textarea{overflow:auto}
[hidden],audio:not([controls]),template{display:none}
details,main,summary{display:block}
input[type=number]{width:auto}
input[type=search]{-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
progress{display:inline-block}
small{font-size:75%}
textarea{resize:vertical}
[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*,::after,::before{box-sizing:inherit;border-style:solid;border-width:0}
*{font-size:inherit;line-height:inherit;margin:0;padding:0}
::after,::before{text-decoration:inherit;vertical-align:inherit}
:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;cursor:default;font:16px/1.5 sans-serif;text-rendering:optimizeLegibility}
a{text-decoration:none}
audio,canvas,iframe,img,svg,video{vertical-align:middle}
button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}
code,kbd,pre,samp{font-family:monospace,monospace}
nav ol,nav ul{list-style:none}
select{-moz-appearance:none;-webkit-appearance:none}
select::-ms-expand{display:none}
select::-ms-value{color:currentColor}
table{border-collapse:collapse;border-spacing:0}
::-moz-selection{background-color:#B3D4FC;text-shadow:none}
::selection{background-color:#B3D4FC;text-shadow:none}
@media screen{[hidden~=screen]{display:inherit}
[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important}
}
/*# sourceMappingURL=sanitize.css.map */


/*--------------------------------------------------------------
## 共通
--------------------------------------------------------------*/

body{
	color: #5b5b5b;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 0.95rem;
	line-height: 1.65;
	text-align: left;
}

img{
	max-width:100%;
	height:auto;
}


/*link*/

a{
	text-decoration:none;
	color: #8bbc07;
    transition: all .1s ease;
	-webkit-tap-highlight-color: gba(67, 141, 198, 0.1);
}

a:hover {
	opacity:0.6;
	transition: all .3s;
}

a.link_tel{
    color: #fff;
}

/* スマホのみ */
@media screen and (max-width: 767px){

.sp_none{
	-webkit-tap-highlight-color: gba(67, 141, 198, 0.1);
}

}

/*clearfix*/

.clearfix {
	min-height: 1px;
}

.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	font-size: 0.1em;
	line-height: 0;
}

* html .clearfix {
	height: 1px;
}

.clear{
	clear:both;
}


/*flex-box*/

.flex_between_all{
	-js-display: flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.flex_around_all{
	-js-display: flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.flex_center_all{
	-js-display: flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/*section_inner*/

.section_inner_long,
.section_inner{
    width: 100%;
    margin: 0 auto;
    padding:0 10%;
}

/*iframe*/

.iframe_wrapper{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.iframe_wrapper iframe,
.iframe_wrapper object,
.iframe_wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*text-deco*/

p.txt_s,
span.txt_s{
	font-size: 12px!important;
}

.font_default{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";    
}

b{
	background: -moz-linear-gradient(transparent 90%, #bfd678 0%);      /* Firefox用 */
	background: -webkit-linear-gradient(transparent 90%, #bfd678 0%);   /* Safari用 */
	background: -ms-linear-gradient(transparent 90%, #bfd678 0%);       /* IE用 */
	background: -o-linear-gradient(transparent 90%, #bfd678 0%);        /* Opera用 */
	background: linear-gradient(transparent 90%, #bfd678 0%);           /* Default */
	font-weight:bold;
}

/*Webfont*/

h1,h2,h3,h4,h5,h6,
#header,
a.btn_green,
a.btn_white,
#intro,
ul.general_cta_list li p.tel,
a.link_arw,
.copyright,
.btm_menu,
p.wf,
span.wf{
	font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
}


/* スマホのみ */
@media screen and (max-width: 767px){

.sp_none,
.only_wide_pc{
	display:none!important;
}
    
p{
    font-size: 13px;
}
    
p.txt_s,
span.txt_s{
	font-size: 9px!important;
}

}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {

.tab_none,
.only_wide_pc{
	display:none!important;
}
    
p{
    font-size: 14px;
}

}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){

.pc_none{
	display:none!important;
}
    
p{
    font-size: 15px;
}

/*flex-box*/

.flex_between{
	-js-display: flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.flex_around{
	-js-display: flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
    
.flex_center{
	-js-display: flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
    
/*section_inner*/

.section_inner_long,
.section_inner{
    width: 980px;
    padding: 0 40px;
    margin: 0 auto;
}
    
}

/* PC（小画面）のみ */
@media screen and (min-width : 1024px) and (max-width: 1919px) {
    
.only_wide_pc{
	display:none!important;
}
    
}
    
/* PC（大画面）のみ */
@media print, screen and (min-width : 1920px){

.wide_pc_none{
    display:none!important;
} 

p{
    font-size: 16px;
}

    
/*section_inner*/

.section_inner_long{
    width: 1200px;
    margin: 0 auto;
}

}

/*アニメーション*/

.animated {
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

/*--------------------------------------------------------------
## ヘッダー・メインビジュアル
--------------------------------------------------------------*/

header{
    background-color: #000;
}    
    
#top_mv{
    color: #fff;
    margin: 0 auto;
    display: flex;
    -webkit-box-align: start;     
}

#top_mv a{
    color: #fff;
}

.top_mv_inner{
    margin: 0 auto;
    padding:3%;
}    

#top_mv h1 span{
    color:#8bbc07;
} 
    
#top_mv h2{
    text-align: center;
}

.top_mv_mainarea_circle_wrap{
    margin-bottom: 3vh;
}    
    
.top_mv_mainarea_circle{
    background: url("../img/top_mv_mainarea_circle_bg.svg");
    background-size:100% 100%;
    text-align: center; 
}

header p.kome,
    p.btm_kome{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    letter-spacing: 2.5px;
}
    
ul.top_mv_ces_title{ 
    display:table;
}

ul.top_mv_ces_title li{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
    
li.ces_list_logo{ 
    width: 15%;
}

li.ces_list_title{ 
    width: 85%;
    padding-left: 20px;
}
    
header li.ces_list_title h3{ 
    border-radius: 50px;
    border: solid 2px #fff;
}

#top_mv .top_mv_sub_area p{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    line-height: 180%;
}


/* スマホとタブレット */
@media screen and (max-width: 1023px){

#top_mv{
    background: url("../img/top_mv_bg_sp.jpg") top center;
    background-size:cover;
    align-items: flex-end;
    height: 93vh;
}    
    
.top_mv_mainarea img{
    width: 100%;
    opacity: 0.3;
}    
    
.top_mv_mainarea,
.top_mv_sub_area{
    width: 100%;
}
    
.top_mv_inner{
    padding:8% 8%;
}
    
#top_mv h1{
    font-size: 8.3vw;
    text-align: center;
} 
    
#top_mv h2{
    font-size: 3.4vw;
    padding: 0 0 20px 0;
    margin-bottom: 20px;
    letter-spacing: 2px;
    border-bottom: double 3px #fff;
}

.top_mv_mainarea_circle{
    width: 85px;
    height: 85px;
    padding-top: 20px;
    font-size: 10px;
    line-height: 150%;
    margin: 0 2px;
    letter-spacing: 0;
}

.top_mv_mainarea_circle p{
    font-size: 11px;
}
    
.top_mv_mainarea{
    margin-bottom: 20px;
}

p.btm_kome{
    font-size: 9px;
    margin-top: 10px;
    letter-spacing: 0;
}
    
span.kome{
    font-size: 9px;
    padding-left: 3px;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
    
header li.ces_list_title h3{
    font-size: 11px;
    padding: 5px;
}

.top_mv_sub_area p{
    font-size: 10px;
    margin-bottom: 5px;
}
    
ul.top_mv_ces_title{ 
    margin-bottom: 10px;
}
    
}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {  

#top_mv{
    height: 96vh;
}     
    
.top_mv_inner{
    padding:5% 5%;
}    
    
#top_mv h1{
    font-size: 60px;
} 

#top_mv h2{
    font-size: 26px;
    padding:10px 0 30px 0;
    margin-bottom: 30px;
    letter-spacing: 2px;
}    
    
.top_mv_mainarea_circle{
    width: 140px;
    height: 140px;
    padding-top: 35px;
    margin: 0 10px;
    letter-spacing: 0;
}
    
.top_mv_mainarea_circle p{
    font-size: 14px;
    line-height: 150%;
}

.top_mv_sub_area{
    width: 90%;
    display: block;
    margin: 0 auto;
}
    
.top_mv_sub_area p{
    font-size: 12px;
}
    
header li.ces_list_title h3{
    font-size: 12px;
    padding: 10px;
}
    
p.btm_kome{
    text-align: center;
    padding-top: 20px;
    line-height: 180%;
}
    
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){   
    
#top_mv{
    background: url("../img/top_mv_bg.jpg") center top no-repeat;
    background-size:cover;    
    height: 83vh;
    max-height: 850px;
    align-items: flex-end;
}

.top_mv_mainarea{
    width: 50%;
    max-width: 800px;
}

.top_mv_sub_area{ 
    width: 40%;
    display: flex;
    align-items: flex-end;    
}

.top_mv_inner{
    padding:4vh 4vw;
}
    
#top_mv h1{
    font-size: 4.2vw;
    border-bottom: double 6px #fff;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: center;
}
    
#top_mv h2{
    font-size: 1.8vw;
    margin-bottom: 3vh;
    letter-spacing: 2px;
    text-align: center;
}
    
.top_mv_mainarea_circle{
    width: 120px;
    height: 120px;
    padding-top: 28px;
    font-size: 13px;
    line-height: 150%;
    margin: 0 5px;
}
    
header p.kome,
    p.btm_kome{
    font-size: 10px;
}
    
header li.ces_list_title h3{ 
    height: 60px;
    line-height: 60px;
    font-size: 14px;
}
    
.top_mv_sub_area p{
    font-size: 12px;
}
    
ul.top_mv_ces_title{ 
    margin-bottom: 20px;
}
    
}

/* PC（大画面）のみ */
@media print, screen and (min-width : 1920px){

#top_mv{
    max-height: 1500px;
}    
    
.top_mv_inner{
    padding: 8vh 5vw;
    max-width: 1920px;
}     

#top_mv h1{
    font-size: 75px;
}
    
#top_mv h2{
    font-size:1.35vw;
    letter-spacing: 2px;
}    
    
.top_mv_mainarea_circle{
    width: 170px;
    height: 170px;
    padding-top: 45px;
    font-size: 17px;
    margin: 0 10px;
    
}
    
header li.ces_list_title h3{ 
    font-size: 17px;
}
    
.top_mv_sub_area p{
    font-size: 15px;
}
    
}


/*IE調整*/
@media all and (-ms-high-contrast:none)/* and (min-width : 1024px)*/{

.top_mv_sub_area{
    max-width: 1000px;
}    
    
li.ces_list_logo img{ 
    width: 100px;
    height: 80px;
}

}

/*--------------------------------------------------------------
## CTA
--------------------------------------------------------------*/

#first_cta{
    color: #fff;
    background-color: #000;
    align-items: center;
    display: flex;
    position: relative;
}

.general_cta{
    background-color: #3f3c36;
    color: #FFFFFF;
}

a.btn_green{
    width: 100%;
    display: block;
    background:#8bbc07;
    height: 70px;
    line-height: 70px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
}

a.btn_green span{
    background: url("../img/icon_arw_white.svg") right no-repeat;
    background-size: 20px 20px;
    padding-right: 30px;   
}

a.btn_white{
    width: 100%;
    display: block;
    background:#fff;
    color: #5b5b5b;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
}

a.btn_white span{
    background: url("../img/icon_arw_green.svg") right no-repeat;
    background-size: 20px 20px;
    padding-right: 30px;
}

.general_cta_img{
    position: relative;
}

.general_cta h3,
#campaign h5{
   position: relative;
   text-align: center;
    margin-top: 30px;
}

.general_cta h3:before,
#campaign h5:before{
    border-top: 1px solid #fff;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

.general_cta h3 span,
#campaign h5 span{
    background-color: #3f3c36;
    display: inline-block;
    padding: 0 40px; /*ラインとテキストの間を調整*/
    position: relative; /*水平ラインが突き抜けないように*/
}

.general_cta_contact_area{
    border: solid 2px #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.general_cta_contact_tel,
.general_cta_contact_mail{
    width: 50%;
    padding:20px 5px;
}

ul.general_cta_list{
    display: table;
    width: 100%;
}

ul.general_cta_list li p{
    font-size: 14px;
}

ul.general_cta_list li p.tel{
    font-size: 25px;
    letter-spacing: 3px;
}

ul.general_cta_list li.cta_list_title{
    width: 45%;
    border-right: dotted 3px #fff;
    padding-right: 10px;
    text-align: center;
}

.cta_list_link{
    width: 55%;
    padding-left: 20px;
}

img.cta_list_icon{
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

.general_cta h4{
    font-size: 15px;
}

/* スマホのみ */
@media screen and (max-width: 767px){

#top_mv{
    padding-top: 70px;
}    
    
.phonak_logo{
    width: 130px;
    height: 100px;
    right:0;
    top:0;
}

.phonak_logo img{
    width: 70px;
    height: auto;
}
    
.general_cta h2,
.general_cta_title p{
    margin-bottom: 15px;
}

.general_cta_img img{
    width: 70%;
    height: auto;
    display: block;
    margin: -80px auto 15px auto;
    padding-left: 20px;
} 
    
a.btn_green,
a.btn_white{
    font-size: 15px;
}
    
a.btn_green span,
a.btn_white span{
    background-size: 15px 15px;
    padding-right: 25px;   
}
    
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){

#first_cta,
.general_cta{
    padding-top:30px; 
    padding-bottom:30px;
} 

.phonak_logo{
    /* background-color: #000; */
    display: flex;
    align-items: center;
    text-align: center;
    position: absolute;
}
    
.phonak_logo img{
    height: auto;
    display: block;
    margin: 0 auto;
}
    
.first_cta_title,
.first_cta_txt,
.first_cta_btn{
    width: 100%;
}
    
.first_cta_title,
.first_cta_txt{
    margin-bottom: 10px;
}
    
.general_cta h3,
#campaign h5{
    font-size: 15px;
    margin-bottom: 20px;
}
    
.general_cta h4,
#campaign h6{
    font-size: 13px;
    margin-bottom: 10px;
}
    
.general_cta_contact_tel,
.general_cta_contact_mail{
    width: 100%;
    padding:25px 0;
    text-align: center;
}
    
/*.general_cta_contact_tel{
    border-bottom: dotted 2px #fff;    
}*/

ul.general_cta_list li{
    list-style: none;
}
    
ul.general_cta_list li.cta_list_title{
    width: 100%;
    border-right:none;
    padding-right: 0;
    text-align: center;
}

.cta_list_link{
    width: 100%;
    padding-left:0;
}

.general_cta h3 span {
    padding: 0 20px; /*ラインとテキストの間を調整*/
}
    
ul.general_cta_list li p.tel{
    margin-top: -10px;
}
    
}

/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){

.general_cta_img{
    width: 48%;
} 
.general_cta_title{
    width: 48%;
    display: flex;
    align-items: center;    
}
    
.general_cta h2,
.general_cta_title p{
    margin-bottom: 20px;
}
    
}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {
    
.first_cta_title,
.first_cta_txt{
    width: 49%;
}

.first_cta_txt{
    padding-left: 20px;
    align-items: center;
    display: flex;      
}

.first_cta_txt p{
    font-size: 12px;
}  

.first_cta_btn{
    margin-top: 15px;
}
    
.phonak_logo{
    width: 180px;
    height: 150px;
    right:0;
    top:0;
}

.phonak_logo img{
    width: 130px;
}
    
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){

#first_cta{
    height: 17vh;
} 

.first_cta_title{
    width: 33%;
}

.first_cta_txt{
    width: 42%;  
}

.first_cta_btn{
    width: 25%;
}
    
.first_cta_txt_inner{
    margin-left: 20px;
    padding-left: 25px;
    border-left: solid 2px #fff;
}
    
#first_cta .first_cta_txt_inner p{
    font-size: 12px;
    padding-top: 5px;
}

.phonak_logo{
    display: block;
    margin-bottom: 3vh;
}    
    
.phonak_logo img{
    width: 110px;
    height: auto;
}
    
.general_cta{
    padding: 60px 0;
}
    
.general_cta_img img{
    position: absolute;
    top:0;
    margin-top: -120px;
}
    
.general_cta{
    font-size: 20px;
}
    
.general_cta h3{
    font-size: 20px;
    margin-bottom: 30px;
}

/*.general_cta_contact_tel{
    border-right: solid 2px #fff;
}*/
    
ul.general_cta_list li{
    display:table-cell;
    vertical-align:middle;
}

    
}

/* PC（大画面）のみ */
@media print, screen and (min-width : 1920px){

.first_cta_txt_inner p{
    font-size: 16px;
}
    
a.btn_green{
    height: 85px;
    line-height: 88px;
}
    
.phonak_logo img{
    width: 140px;
    height: auto;
}
      
#first_cta .first_cta_txt_inner p{
    font-size: 15px;
    padding-top: 5px;
}
    
}

/*IE調整*/
@media all and (-ms-high-contrast:none)/* and (min-width : 1024px)*/{

.general_cta_img img{
    max-width: 400px;
    height: auto;
}
    
.general_cta_title img{
    max-width: 450px; 
    height: auto;
}

}


/*--------------------------------------------------------------
## イントロダクション
--------------------------------------------------------------*/

#introduction{
    color: #fff;
}

#introduction h2{
    border-bottom: solid 2px #fff;
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){

#introduction{
    padding:30px 0 160px 0;
    background:url("../img/intro_bg_sp.jpg") right bottom;
    background-size: cover;    
}      
    
#introduction h2{
    font-size: 20px;
    line-height: 160%;
    letter-spacing: 0;
    padding-bottom: 20px;
    margin-bottom: 20px;    
}
    
#introduction p{
    margin-bottom: 20px;
    letter-spacing: 0;
}

}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){

#introduction{
    background:url("../img/intro_bg.jpg") right bottom;
    background-size: cover;
    padding:7vh 0;
}     
    
#introduction{
    text-align: center;
}
    
#introduction h2{
    font-size: 30px;
    line-height: 190%;
    padding-bottom: 40px;
    margin-bottom: 40px;    
}
    
#introduction p{
    line-height: 200%;
    margin-bottom: 30px;
    letter-spacing: 0;
}
    
#introduction p.txt_s{
    letter-spacing: 1.5px;
    padding-top: 20px;
}
    
}


/*--------------------------------------------------------------
## 特徴
--------------------------------------------------------------*/

#feature{
    background: #f2f2f2;
}

#feature h2 span.txt_s{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: normal;
}

p.feature_kome_last{
    text-align: right;
    padding: 10px 0;
}

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

.feature_txt_inner{
    background-color: #fff;
    width: 100%;
    text-align: center;
    position: relative;
}

#feature p.txt_s{
    margin-top: 5px;
}

.feature_txt_number{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);    
    background: #3f3d36;
    text-align: center;
    border:double 8px #fff;
}

#feature h2{
    text-align: center;
    position: relative;
}

#feature h2:after{
    width:30px;
    content: "";
    border-bottom: 5px solid #8bbc07;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: -20px;
    margin:auto;
}

.feature_bg_01{
    background: url("../img/feature_bg_01.jpg") center;
    background-size: cover;
}

.feature_bg_02{
    background: url("../img/feature_bg_02.jpg") top;
    background-size: cover;
}

.feature_bg_03{
    background: url("../img/feature_bg_03.jpg") bottom;
    background-size: cover;
}

.feature_bg_04{
    background: url("../img/feature_bg_04.jpg") center;
    background-size: cover;
}


/* スマホとタブレット */
@media screen and (max-width: 1023px){
      
#feature .section_inner_long{
    padding: 0 30px;
}
    
.feature_txt{
    padding: 40px 0;
}
    
    
#feature h2{
    margin-bottom: 40px;
    font-size: 18px;
}
    
}

/* スマホのみ */
@media screen and (max-width: 767px){

#feature{
    padding: 30px 0 5px 0;
}
    
#feature h2{
    line-height: 150%;
}
    
.feature_img{
    width: 100%;
    height: 35vh;
}
    
.feature_txt{
    padding: 0 0 20px 0;
}
    
.feature_txt_inner{
    padding: 75px 10% 10% 10%;
}
    
.feature_txt_number{
    width: 130px;
    height:80px;
    padding-top: 20px;
    margin-top: -20px;
}
    
.feature_txt_number img{
    width: 25px;
    height: 25px;
}
    
p.feature_kome_last{
    text-align: center;
    padding: 0 0 20px 0;
}
    
}


/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {
    
#feature{
    padding-bottom:30px;
} 
    
}

/* タブレットとPC（小画面）*/
@media print, screen and (min-width:768px){

.wrap_reverse{
    flex-direction: row-reverse;
}
    
.feature_img,
.feature_txt{
    width: 50%;
}
    
.feature_txt_inner{
    padding: 120px 8% 10% 8%;
}
    
.feature_txt_number{
    width: 160px;
    height:120px;
    padding-top: 33px;
    margin-top: -20px;
}
    
.feature_txt_number img{
    width: 40px;
    height: 40px;
}
    
}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){

#feature{
    padding-bottom: 7vh;
}    
    
.feature_txt{
    padding: 80px 0;
}
    
.feature_txt_inner{
    padding: 140px 8% 10% 8%;
}
    
#feature h2{
    margin-bottom: 40px;
    font-size: 22px;
}
    
}


/*--------------------------------------------------------------
## ブログピックアップ
--------------------------------------------------------------*/

#blog_pickup h2{
    font-size: 22px;
    margin-bottom: 15px;
}

#blog_pickup p{
    margin-bottom: 20px;
}

.blog_pickup_box{
    background: #f6f6f6;
    padding: 5%;
    align-items: center;
    border-top: solid 10px #403c36;
}

/* スマホのみ */
@media screen and (max-width: 767px){

#blog_pickup{
    padding: 30px 0 70px 0;
}      
    
#blog_pickup h2{
    font-size: 18px;
}
    
.blog_pickup_box{
    padding: 30px;    
}   
    
}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {
    
#blog_pickup{
    padding: 30px 0;
} 
    
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){
    
#blog_pickup .blog_pickup_img{
    margin-bottom: 20px;
}       

}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){

#blog_pickup{
    padding:7vh 0;
}
    
#blog_pickup .blog_pickup_img{
    width: 48%;
}

.blog_pickup_txt{
    width: 48%;
    padding-left: 4%;
}
    
}

/*--------------------------------------------------------------
## 制作の流れ
--------------------------------------------------------------*/

#flow,
#faq,
#company,
#campaign{
    text-align: center;
    padding: 7vh 0;
}

#flow h2,
#faq h2{
    position: relative;
    text-align: center;
    font-size: 30px;
    margin: 20px 0 80px 0;
}

#flow h2:before,
#faq h2:before{
    border-top: 2px solid #5b5b5b;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

#flow h2 span,
#faq h2 span{
    background-color: white;
    display: inline-block;
    padding: 0 40px; /*ラインとテキストの間を調整*/
    position: relative; /*水平ラインが突き抜けないように*/
}

.flow_img,
.flow_txt{
    width: 45%;
    margin-bottom: 40px;
}

.flow_inner{
    background: url("../img/flow_dot.svg") center repeat-y;
    background-size: 10px 10px;
}

img.flow_number{
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

#flow h3{
    font-size: 22px;
    margin-bottom: 15px;
    padding:0 10px;
}

#flow p{
    padding:0 10px;
}

.area_left{
    text-align: right;
}

#flow .area_left p{
    text-align: left;
}

.area_right{
    text-align: left;
}

.flow_last_wrap{
    width: 100%;
    background: url("../img/icon_flow_arw.svg") center top no-repeat;
    background-size: 20px 20px;
    padding-top: 40px;
}

img.flow_item{
    display: block;
    margin: 0 auto 20px auto;
}

#flow h4{
    font-size: 28px;
    margin-bottom: 20px;
}

#flow h5{
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: -10px;
}


/* スマホとタブレット */
@media screen and (max-width: 1023px){

.flow_img,
.flow_txt{
    margin-bottom: 30px;
}    

#flow,
#faq,
#company,
#campaign{
    padding: 30px 0
}    
    
#flow h2,
#faq h2{
    font-size: 18px;
    margin: 10px 0 30px 0;
}

#flow h2 span,
#faq h2 span{
    padding: 0 15px; /*ラインとテキストの間を調整*/
}
    
img.flow_number{
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    float: left;
    margin-right: 8px;
}
    
#flow h3{
    font-size: 15px;
    margin-bottom: 10px;
    padding:2px 0 0 0;
    text-align: left;
    line-height: 150%;
}
    
#flow p{
    padding:0;
}
    
.flow_last_wrap img.flow_number{
    display: block;
    margin: 0 auto 10px auto;
    float: none;
    width: 50px;
    height: 50px;    
}
    
#flow h4{
    font-size: 18px;
    margin-bottom: 10px;
}
    
.flow_last_wrap{
    padding-top: 30px;
}
    
#flow h5{
    font-size: 15px;
    margin-bottom: 10px;
}
    
}

/* スマホのみ */
@media screen and (max-width: 767px){
    
#flow p.txt_s{
    text-align: left;
}
    
}

/*--------------------------------------------------------------
## よくある質問
--------------------------------------------------------------*/

#faq{
    background-color:#f2f2f2;
}

#faq h2 span{
    background-color:#f2f2f2;
}

#faq .faq_wrap{
    background-color: #fff;
	padding:80px;
}

#faq p,
#faq img{
    margin-bottom: 15px;
}

.faq_question {
    position: relative;
    text-align:left;
    padding-bottom:10px;
    padding-right: 30px;
    border-bottom: dotted 1px #5b5b5b;
    margin-top:20px;
}

.faq_answer{
	display:none;
	text-align:left;
	background:#f7f7f7;
	padding:40px 40px 25px 40px;
}

.txt_green{
    color: #8bbc07;
}

.txt_red{
    color: #9f4d5c;
}

#faq h4{
	font-size:18px;
	margin-bottom:20px;
}

#faq .faq_answer p{
	padding:0 30px;
}

/*下矢印↓*/
.faq_question:after {
   content: "";
   position: absolute;
   border-right: 2px solid #8bbc07;
   border-bottom: 2px solid #8bbc07;
   width: 8px;
   top:10px;
   right: 20px;
   height: 8px;
   transform: rotate(45deg);
}

/*上矢印↑*/
.faq_question.ac:after {
   content: "";
   position: absolute;
   border-left: 2px solid #8bbc07;
   border-top: 2px solid #8bbc07;
   border-right: 0;
   border-bottom: 0;
   width: 8px;
   top:10px;
   right: 20px;
   height: 8px;
   transform: rotate(45deg);
}

/* スマホのみ */
@media screen and (max-width: 767px){

/*下矢印↓*/
.faq_question:after {
   width: 8px;
   top:5px;
   right: 10px;
   height: 8px;
}

/*上矢印↑*/
.faq_question.ac:after {
   width: 8px;
   top:10px;
   right: 10px;
   height: 8px;
}

#faq .faq_wrap{
	padding:10px 20px 20px 20px;
    margin-top: -10px;
}

.faq_question {
    padding-right: 0;
}    
    
.faq_answer{
	padding:20px;
}

#faq h3{
	font-size:13px;
	padding-right:25px;
	line-height:140%;
}

#faq h4{
	font-size:13px;
	margin-bottom:10px;
}

#faq .faq_answer p{
	padding:0 10px;
}

}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {

#faq .faq_wrap{
	padding:60px;
}

}

/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){
    
#faq h3{
	font-size:20px;
	padding-right:25px;
	line-height:120%;
    padding-bottom: 5px;
}
    
#faq .faq_wrap{
    margin-top: -20px;
}
    
}

/*--------------------------------------------------------------
## 会社概要
--------------------------------------------------------------*/

#company p{
    margin-bottom: 10px;
}

#company .section_inner_long{
	text-align:left;
	background:url(../img/company_bg.jpg) right top no-repeat;
	background-size:60% auto;
}

#company .company_address{
	display: flex;
	align-items: flex-end;
}

.company_logo{
	width:35%;
	margin-bottom:20px;
	padding:0 20px;
	text-align:left;
}

.company_photo{
	width:48%;
	margin-top:20px;
}

.company_address_inner{
	border-top:solid 2px #3f3d36;
	border-bottom:solid 2px #3f3d36;
	padding:20px 15px;
}

#company .company_address_inner p{
	font-size:14px;
}

#company h3{
	margin-bottom:10px;
}

ul.customer{
    display:table;
    table-layout: fixed;
    width:100%;
}

ul.customer li{
    display:table-cell;
    vertical-align:middle;
    text-align:left;
}

ul.customer li.customer_title{
	width:90px;
	border-right: solid 1px #3f3d36;
}

ul.customer li.customer_txt{
	padding:5px 0 5px 20px;
}

ul.customer li.customer_txt p{
	margin-bottom:0;
}

.box_two{
	width:50%;
}

/* スマホとタブレット */
@media screen and (max-width: 1023px){

.box_two{
	width:100%;
}

.company_logo,
.company_photo{
	width:50%;
}

.company_photo img{
	width:100%;
	height:auto;
	margin-bottom:20px;
}

.company_logo{
	width:115px;
	padding:0 10px;
	margin-bottom:20px;
}
    
.box_two{
	width:100%;
}

}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {

.company_logo{
	width:150px;
}

}


/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){

.company_address{
	padding-left:60px;
}

}



/*--------------------------------------------------------------
## キャンペーン詳細
--------------------------------------------------------------*/

#campaign{
    background-color:#3f3c36;
    position: relative;
}

.campaign_titlearea{
    display: flex;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
    color: #fff;
}

.campaign_item_img{
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin-top: -50px;
}

.campaign_titlearea_img{
    width: 50%;
}

.campaign_titlearea_txt{
    width: 47%;
    border: solid 1px #fff;
    padding: 25px 20px;
    text-align: left;
}

#campaign .campaign_flow_area{
    background-color: #fff;
    padding: 10%;
}

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

.campaign_flow_txt p{
    text-align: left;
}

#campaign h4{
    font-size: 20px;
    border-bottom: solid 2px #8bbc07;
    margin-bottom: 30px;
    text-align: left;
    padding-bottom: 5px;
}

#campaign h4 span{
    color: #8bbc07;
    padding-right: 10px;
}

a.link_arw{
    color: #8bbc07;
}

a.link_arw span{   
    background: url("../img/icon_arw_green.svg") right no-repeat;
    background-size: 20px 20px;
    padding-right: 30px;
}

#campaign h5,
#campaign h6{
    color: #fff;
}

#campaign .general_cta_contact_area{
    color: #fff;
}

#campaign .btn_green{
    border: solid 2px #FFF;
 }

/* スマホとタブレット */
@media screen and (max-width: 1023px){
    
.campaign_titlearea{
    margin-top: 40px;
    margin-bottom: 20px;
}
    
.campaign_item_img{
    width: 80px;
    height: 80px;
    margin-top: -20px;
}
    
.campaign_titlearea_img{
    width: 100%;
    margin-bottom: 15px;
}

.campaign_titlearea_txt{
    width: 100%;
    padding: 20px;
}
    
#campaign h3{
    font-size: 18px;
    margin-bottom: 20px;
}
    
#campaign h4{
    font-size: 15px;
    margin-bottom: 20px;
}

#campaign .campaign_flow_area{
    margin-bottom: 20px;
}    
    
#campaign .campaign_flow_txt p{
    margin-bottom: 15px;
}

.campaign_flow_wrap{
    margin-bottom: 10px;
}
    
.campaign_flow_img{
    margin-bottom: 10px;
}
    
#campaign .btn_green{
    height: auto;
    line-height:25px;
    margin-bottom: 60px;
    padding: 25px 25px 40px 25px;
    text-align: center;
    background: #8bbc07 url("../img/icon_arw_white.svg") no-repeat;
    background-size: 20px 20px;
    background-position : right 50% bottom 15px;
    margin-bottom: 20px;
 }
    
#campaign .btn_green span{
    font-size: 18px;
    letter-spacing: 0;
    background-image:none;
    padding-right: 0;
} 
    
}

/* タブレットのみ */
@media screen and (min-width : 768px) and (max-width: 1023px) {

.campaign_titlearea_txt{
    text-align: center;
}
    
}


/* PC（小画面）とPC（大画面） */
@media print, screen and (min-width : 1024px){

.campaign_flow_img,
.campaign_flow_txt{
    width: 45%;
}    
    
.campaign_titlearea_txt p{
    font-size: 14px;
}
    
#campaign h3{
    font-size: 28px;
    margin-bottom: 40px;
}
    
#campaign .campaign_flow_area{
    margin-bottom: 40px;
}
    
#campaign .campaign_flow_txt p{
    margin-bottom: 20px;
}
    
.campaign_flow_wrap{
    margin-bottom: 40px;
}
    
#campaign h5{
    font-size: 20px;
    margin-bottom: 30px;
}
    
#campaign .btn_green{
    height: 120px;
    line-height: 120px;
    margin-bottom: 60px;
 }
    
#campaign .btn_green span{
    font-size: 22px;
    letter-spacing: 3px;
}    
    
}

/*--------------------------------------------------------------
## コピーライト
--------------------------------------------------------------*/

.copyright{
	padding: 35px 0 30px 0;
	background: #000000;
	text-align: center;
	color:#e2e2e2;
    letter-spacing: 2px;
    font-size: 13px;
}

/* スマホのみ */
@media screen and (max-width: 767px){
    .copyright{
        padding: 30px 0 115px 0;
        font-size: 12px;
    }
}

/*--------------------------------------------------------------
## 下層ページ
--------------------------------------------------------------*/
.sub_header{
	padding: 24px 0;
}
.sub_header img{
	display: block;
	margin: 0 auto;
	width: 240px;
	height: auto;
}

@media screen and (max-width: 767px){
	.main_contents{
		padding: 24px 8px 64px;
	}
}
@media screen and (min-width:768px){
	.main_contents{
		width: 720px;
		margin: 0 auto;
		padding: 24px 0 80px 0;
	}
}
.main_contents h1{
	text-align: center;
	font-size: 32px;
	margin-bottom: 24px;
}
.main_contents h2{
	font-size: 24px;
	margin: 0 0 8px 0;
}
.main_contents h2 span{
	font-size: 12px;
	color: red;
	margin-left: 8px;
}
.main_contents p{
	font-size: 16px;
	margin: 0;
}
.main_contents a:link,
.main_contents a:visited{
    text-decoration: underline;
    color: #8bbc07;
}
.main_contents a:hover,
.main_contents a:active{
    text-decoration: none;
}
@media screen and (max-width: 767px){
	.main_contents h1{
		font-size: 24px;
	}
	.main_contents h2{
		font-size: 20px;
	}
}
.form_box{
	margin-bottom: 24px;
}
.contact_details_scroll{
  height: 180px;
  overflow-y: scroll;
  transform: translateZ(0);
  border: 1px solid #ddd;
  padding: 8px 16px;
	margin-bottom: 8px;
}
.contact_details_scroll p{
	margin: 8px 0;
}

.thanks_box{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
      flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.thanks_box_item{
	font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
	font-weight: 600;
	font-style: normal;
	text-align: center;
	width: 300px;
	font-size: 18px;
	background-color: #8bbc07;
}
.thanks_box_item a{
	display: block;
	padding: 16px 0;
    color: #fff !important;
    text-decoration: none !important;
}
@media screen and (max-width: 767px){
	.thanks_box_item{
		margin-top: 32px;
	}
}
@media screen and (min-width : 768px) {
	.thanks_box_item{
		margin-top: 48px;
	}
	.thanks_box_item:first-child{
		margin-right: 8px;
	}
	.thanks_box_item:last-child{
		margin-left: 8px;
	}
}

.form_spam{
    width: 80%;
    margin: 0 auto 40px;
}

.form_spam p{
    font-weight: bold !important;
    margin-bottom: 8px;
}

.form_spam ul{
    margin-left: 32px;
}

.form_spam li{
    margin-bottom: 8px;
}

.form_spam li:last-child{
    margin-bottom: 0;
}

/*--------------------------------------------------------------
## フォーム
--------------------------------------------------------------*/
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox']{
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

.main_contents input[type="text"],
.main_contents input[type="email"],
.main_contents textarea{
	border: 1px solid #ddd;
	padding: 8px;
	width: 100%;
}
.main_contents input[type="text"].form_zip{
	width: inherit;
}
.main_contents span.mwform-checkbox-field-text{
	position: relative;
	padding-left: 28px;
}
.main_contents span.mwform-checkbox-field-text::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border: 1px solid #ddd;
}
.main_contents input[type="checkbox"]:checked + span.mwform-checkbox-field-text::after{
    position: absolute;
    top: 0;
    left: 0;
    content: "✓";
    display: block;
    width: 22px;
    height: 22px;
    border: 1px solid #8bbc07;
    background-color: #8bbc07;
    color: #fff;
}
.main_contents input[type='submit']{
	border: 1px solid #ddd;
	padding: 8px 16px;
	display: block;
	margin: 0 auto;
}
.main_contents input[type='radio']{
    position: relative;
    padding-left: 12px;
}
.main_contents input[type='radio']:after{
    content: "";
    position: absolute;
    top: 40%;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #ddd;
    border-radius: 50%;
}
.main_contents input[type='radio']:checked:after{
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    left: 0;
    width: 15px;
    height: 15px;
    background: #8bbc07;
    border-radius: 50%;
}

/*--------------------------------------------------------------
## ボトムリンク
--------------------------------------------------------------*/

/* スマホのみ */
@media screen and (max-width: 767px){
    .btm_menu{
        width: 100%;
        position: fixed;
        bottom: 0;
        background: rgba(255, 255, 255, 0.90);
        z-index: 990;
        padding:15px;
    }
        
    .btm_menu .flex_between_all{
        align-items: center;  
        }
        
    .btm_img,
    .btm_btn{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btm_img{ 
        width: 60%;
    }
        
    .btm_img img{
        width: 100%;
        height: auto;
        padding-right: 10px;
    }

    .btm_btn{ 
        width: 40%;
        display: block;
    }
        
    a.btm_green_btn{
        width:100%;
        display: block;
        background-color:#8bbc07;
        border-radius: 5px;
        color: #fff;
        height: 60px;
        line-height: 60px;
        font-size: 3.3vw;
        text-align:center;
    }
        
    a.btm_green_btn span{
        background:url(../img/icon_arw_white.svg) right no-repeat;
        background-size:15px 15px;
        padding-right:20px;
    }

}