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

:root {
  --color_blue: #1d55a8; /* var(--color_blue); *//*青*/
  --color_orange: #ec661a; /* var(--color_blue); *//*オレンジ*/
  --color_yellow: #ffe240; /* var(--color_yellow); *//*黄色*/
  --color_red: #cc0000; /* var(--color_red); *//*黄色*/
  --color_white: #ffffff; /* var(--color_white); *//*白色*/
  --color_light_blue: #e1f5fd; /* var(--color_light_blue); *//*水色[背景用]*/
  --ff_MP1C: 'M PLUS 1 Code', monospace; /* var(--ff_MP1C); */
  --ff_MP1p: 'M PLUS 1p', sans-serif; /* var(--ff_MP1p); */
  --ff_MPr1C: 'M PLUS Rounded 1c', sans-serif; /* var(--ff_MPr1C); */
  --ff_NotoSans: 'Noto Sans JP', sans-serif; /* var(--ff_NotoSans); */

  --fs_l4: 65px; /* var(--fs_l4); */
  --fs_l3: 60px; /* var(--fs_l3); */
  --fs_l2: 50px; /* var(--fs_l2); */
  --fs_l: 40px; /* var(--fs_l); */
  --fs_m: 32px; /* var(--fs_m); */
  --fs_s: 24px; /* var(--fs_s); */
  --fs_s2: 17px; /* var(--fs_s2); */
  --fs_s3: 16px; /* var(--fs_s3); */
}
.fs_l3{font-size: var(--fs_l3);}
.fs_l2{font-size: var(--fs_l2);}
.fs_l{font-size: var(--fs_l);}
.fs_m{font-size: var(--fs_m);}
.fs_s{font-size: var(--fs_s);}
.fs_s2{font-size: var(--fs_s2);}
.fs_s3{font-size: var(--fs_s3);}

.pc-none {display: none!important;}
img.tsuiju {display: none;}

header > .inner ,
section > .inner ,
.page_nav > .inner {
  position: relative;
  width: 960px;
  margin: 0 auto;
}
header,section {
  min-width: 960px;
}

/*=============================================
ヘッダー
===============================================*/
#nav {display: none;}
header {  text-align: center;}
header > .inner {width: 1060px;}
header .header_tell {
  position: absolute;
  top: 10px;
  right: 50px;
  text-align: right;
  font-weight: bold;
  font-family: var(--ff_MP1C);
}
header .header_tell div {
  display: flex;
  justify-content: flex-end;
}
header .header_tell div span {
  display: flex;
  align-items: center;
}
header .reception_time {
  font-size: 18px;
  margin-bottom: 5px;
}
header .reception_time span {
  color: var(--color_red);
  margin-right: 5px;
}
header .phon_number .free {
  background: var(--color_red);
  color: var(--color_white);
  border-radius: 5px;
  padding: 0 5px;
  margin-right: 5px;
}
header .phon_number .number {
  font-size: 32px;
  line-height: 32px;
  font-family: var(--ff_MP1p);
  color: var(--color_red);
}
header h1 {height:630px }

header .header_flex {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  justify-content: space-between;
/*  width: 650px;*/
  width: 100%;
}
header .header_coupon {
  position: relative;
  background: #cc0000;
  color: #FFFFFF;
  border-radius: 10px;
  line-height: 1.35;
/*  flex-grow: 1;*/
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin: 5px 0 8px 10px;
  padding: 0 2em;
}
header .header_coupon::after {
  position: absolute;
  top: 4px;bottom: 4px;left: 4px;right: 4px;
  content: "";
  border: dashed 2px #fff;
  border-radius: 8px;
}
header .header_coupon .c_text1 {
  margin-right: 0.5em;
}
header .header_coupon .c_text2 {
    font-size: 1.3em;
}
header .header_coupon .c_text2 span {
color: #FFEB66;
}
header .catch {display: none}


/*=============================================
フッター
===============================================*/
.footer_nav {
  width: 960px;
  margin: 0 auto 20px;
  text-align: center;
}

/*=============================================
ページ内リンク
===============================================*/
.page_nav ul li:nth-child(n+2) {margin-left: 2em}
.page_nav a{
  font-size: 20px;
  padding: 5px 0;
  width: 8em;
}
.page_nav a:hover {background: rgba(255,255,255,0.2)}


/*=============================================
（ページ内リンク下）メールフォームへのリンク
===============================================*/
.go_mailform {
  background: var(--color_orange);
  padding: 0.75em 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.go_mailform a {
  font-size: 20px;
  padding: 5px 0;
  width: 540px;
  border-radius: 5em;
}
.go_mailform a:hover {
  background: var(--color_white);
  color: var(--color_orange);
}


/*=============================================
メール問い合わせ
===============================================*/
#mail_link {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;

  display:flex;
  justify-content: center;
  align-items: center;
  
  position: fixed;
  right: 0;
  top: 80px;
  opacity: 0.85;
  z-index: 9999;
  
  background: #dd2323;
  border: solid #FFFFFF;
  border-width: 2px 0 2px 2px;
  padding: 1em 0.85em  1em 0.85em;;
  border-radius: 1em 0 0 1em;
}
#mail_link ,
#mail_link * {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1.3rem;
}
#mail_link:hover {opacity: 1}

/*=============================================
CTI　クーポン/電話
===============================================*/
article > section.coupon {
  padding: 50px 0;
}
article > section.tell {
  padding: 0;
}

.tell {
  background: url("../images/cta/tell_bg.jpg") no-repeat center top #800f01;
  height: 580px;
  padding: 10px 0 0 !important;
}
.tell h2 {font-size: var(--fs_l3);}
.tell ul {width: 630px;margin: auto;}
.tell ul li {
  width:calc((100% - 10px) / 2);
  font-size: var(--fs_m);
  border: solid 4px var(--color_white);
  border-radius: 20px;
}
.tell .tell_text p{
  margin:30px 0 30px 90px;
  line-height: 1;
}
.tell .tell_text,
.tell .tell_text .min span {font-size:55px;}
.tell .tell_text .min {font-size: 85px;}

.tell .tell_btn {
  width: 880px;
  border: solid 3px var(--color_white);
  border-radius: 30px;
  padding:15px 0 5px 200px;
  margin: auto;
}
.tell .tell_btn h4 {font-size: var(--fs_m);}
.tell .tell_btn .contact {
  margin: 15px 0 5px;
}
.tell .tell_btn .contact_form {
  font-size:40px;
  height: 100px;
}
.tell .tell_btn .contact_form i {
  font-size:70px;
  margin-right: 10px;
}
.tell .tell_btn .contact_form span {}

.tell .inner img.picture_01,
.tell .inner img.picture_02 {
  border: solid 5px #FFF;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.tell img.picture_01 {
  top:140px;
  left: 480px;
}
.tell img.picture_02 {
  top:210px;
  left: 670px;
}
.tell img.cha {
  top:250px;
  left: 550px;
}
.tell .tell_btn img.call_staff {
  bottom: -3px;
  left: 0;
}


/*=============================================
コンテンツ
===============================================*/
article > section {  padding:70px 0 40px}
article .inner > p {  padding:0 50px}

h2 {font-size: var(--fs_l); }
h2 img.cha {
  left: calc(50% - 50px);
  top: -65px;
}
h2.line {
  border-top: solid 4px;
  border-bottom: solid 4px;
  margin-bottom: 30px;
}
h2.line::before {border-bottom: solid 4px;}
h2.line::after {border-top: solid 4px;}
h2.line::before,h2.line::after { height:5px; }


/*　ポイント共通　PC-3カラム/SP-1カラム　
-------------------------------------*/
.point {
  display: flex;
  justify-content: space-between;
}
.point .point_con {
  width: calc((100% - 20px) / 3);
  border: solid 4px var(--color_blue);
  border-radius: 20px;
  padding: 70px 15px 15px;
  margin-top: 40px;
}
.point .point_con .circle_title {
  top: -60px;
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
}
.point .point_con .circle_title i {
  font-size: 34px;
}
.point .point_con .circle_title .ct_1 {
  font-size: 18px;
  padding: 5px 0 2px;
}
.point .point_con .circle_title .ct_2 {
  font-size: 38px;
}
.point .point_con h3 {font-size: var(--fs_s);}




/*どんな鍵でもおまかせください
---------------------------------------------------------------*/
#service {padding-top: 100px}
#service ul {
  width: 670px;
  margin: auto;
  margin-bottom: 20px;
}

#service ul li:nth-child(n+4) {margin-top: 15px;}
#service ul li span {font-size: var(--fs_s); }
#service p:last-child {font-size: var(--fs_m); }


/*皆様が安心して暮らし続けられる地域の鍵屋さんを目指します。
---------------------------------------------------------------*/
#anshin {}
#anshin .inner > p:first-of-type {
  font-size: var(--fs_s);
}
#anshin .anshin_img {margin: 30px 0}
.svgText2 {margin-bottom: 40px}
.svgText1 > svg { height: 3em; }
.svgText2 > svg { height: 4.5em; }
.svgText1 > svg > text {font-size: var(--fs_m); }
.svgText2 > svg > text {font-size: 50px; }
.svgText1 > svg > text ,
.svgText2 > svg > text {
  letter-spacing: 5px;
}
.svgText1 > svg > text:nth-of-type(1) ,
.svgText2 > svg > text:nth-of-type(1) {
  stroke-width      : 12px;
}

#anshin .point .point_con li {font-size: var(--fs_s2);}
#anshin .point .point_con .sub_title {font-size: var(--fs_s2);}
#anshin .point .point_con .sub_title2 {font-size: var(--fs_s);}



/*大切にしている3つのポイント
---------------------------------------------------------------*/
#taisetu .point .point_con h3 {
  font-size: 22px;
}
#taisetu .point .point_con {
  display: flex;
  flex-direction: column;
}
#taisetu .point .point_con p {flex-grow: 1;}
#taisetu .point .point_con figure {padding: 5px}

/*作業料金
---------------------------------------------------------------*/
#price h2 {
  height: 300px;
  padding-top: 40px;
}
#price h2 .inner {
  width: 960px;
  margin: 0 auto;
}
#price h2 .title_1 {
  font-size: var(--fs_l);
  line-height: 50px;
  margin-bottom: 40px;
}
#price h2 .title_2 {
  font-size: var(--fs_l3);
}
#price h2 .inner img.staff {
  top: -40px;
}
#price h2 .title_1 img {
  position: absolute;
  width: 90px;
  right: -50px;
  bottom: -10px;
  z-index: 2;
}
#price h2 .title_1::before,
#price h2 .title_1::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  height: 100%;
  border: solid;
  border-width: 25px 15px;
}
#price h2 .title_1::before {
  left: -30px;
  border-color: transparent var(--color_yellow) var(--color_yellow) transparent  ;
}
#price h2 .title_1::after {
  right: -30px;
  border-color: var(--color_yellow) transparent transparent var(--color_yellow);
}

/******送料無料******/
#price .intro {
  width: 750px;
  padding: 40px 30px;
  border-radius: 30px;
  margin: -50px auto 0;
}
#price .intro p {font-size: var(--fs_m);}
#price .intro .FreeShipping {
  width: 560px;
  line-height: 100px;
  padding-left: 100px;
  font-size: var(--fs_l2);
  margin-bottom: 0;
}

/******料金******/
#price .price .col2,
#price .price .note {
  width: 750px;
  margin: auto;
}
#price .price .col4 {
  width: 960px;
}
#price .price .col2 {
  display: flex;
  justify-content: space-between;
}
#price .price .col2 .service {width:calc((100% - 10px) / 2);}
#price .price .col4 .service {width:calc((100% - 30px) / 4);}
#price .price .col2 .service dt span {font-size: var(--fs_m);}
#price .price .col2 .service dd {font-size: var(--fs_s);}
#price .price .col2 .service dd span {font-size: var(--fs_l2); line-height: 1}
#price .price .col2 .service dd span.use {font-size: var(--fs_s); line-height: 1.5;margin: 10px 0}
#price .price .col4 .service dl {padding: 5px 0;}
#price .price .col4 .service dl dt {margin-bottom: 5px}
#price .price .col4 .service dt span {font-size: var(--fs_s);}
#price .price .col4 .service dd {font-size: var(--fs_s2);}
#price .price .col4 .service dd span {font-size: var(--fs_l); line-height: 1}
#price .price .col4 .service dd span.use {font-size: var(--fs_s2); line-height: 1.5;margin: 5px 10px;}

/*****注意*****/
#price .price .warning {
  width: 750px;
  font-size: var(--fs_s);
  padding: 20px 30px 20px;
  margin: 20px auto;
}
#price .price .warning h3{margin-bottom: 20px}
#price .price .warning h3 .box {
  padding: 8px 10px 5px;
  margin-right: 3px;
}

/*****明朗会計*****/
#price .kaikei {
  width: 960px;
  margin: 80px auto 0;
}
#price .kaikei .inner {
  border: solid 4px var(--color_orange);
  border-radius: 20px;
  padding: 70px 0 20px;
}
#price .kaikei img.cha {
  top:-62px;
  left: calc(50% - 60px);
  width: 120px;
}


#price .kaikei ul.benefit {
  font-size: var(--fs_m);
  font-weight: bold;
  display: table;
  margin: 20px auto;
}
#price .kaikei .payment {width: 860px;margin:20px auto 0}
#price .kaikei .payment h3 {
  font-size: var(--fs_m);
  width: 560px;
  padding: 10px 0;
}
#price .kaikei .payment ul.payment_list {
  display: flex;
  justify-content: space-between;
/*  border: solid 1px var(--color_blue);*/
}
#price .kaikei .payment ul.payment_list li {
  border: solid 2px var(--color_blue);
  background: var(--color_white);
  width: calc((100% - 20px) / 3);
}
#price .kaikei .payment ul.payment_list li span {font-size: var(--fs_m);}
#price .kaikei .payment ul.payment_list li span.title span {font-size: var(--fs_s3);}
#price .kaikei .payment ul.payment_list li figure {text-align: center}
#price .kaikei .payment ul.payment_list li img {max-width: 80%}
#price .kaikei .payment ul.payment_list li .card {
  flex-wrap: wrap;
}
#price .kaikei .payment ul.payment_list li .card img {
  width: calc((100% - 15px) / 3);
  margin: 2px;
}
#price .kaikei .payment ul.payment_list li .qr {
  flex-wrap: wrap;
  justify-content: space-between;
}
#price .kaikei .payment ul.payment_list li .qr img {
height: 40px;
  width: auto;
}
#price .kaikei .payment ul.payment_list li .atobarai {
  flex-direction: column;
}
#price .kaikei .payment ul.payment_list li .atobarai ul {
  width: 100%;
  justify-content: space-between;
  margin-top: 20px;
}
#price .kaikei .payment ul.payment_list li .atobarai ul li {
  flex-grow: 1;
  text-align: center;
}
#price .kaikei .payment ul.payment_list li .atobarai ul li:nth-child(2) {margin: 0 5px}
#price .kaikei .note {font-size: 14px;}





/*鍵の修理・交換サービスの流れ
---------------------------------------------------------------*/
#flow .flow {
  padding: 40px 40px 0;
}
#flow .flow .step {
  width: calc((100% - 130px) / 3);
}
#flow .flow .step .circle_title {
  width: 100px;
  height: 100px;
  top: -40px;
  left: -40px;
  font-size: var(--fs_s);
  padding-top: 10px;
}
#flow .flow .step .circle_title span:nth-child(2) {font-size: var(--fs_l);}

#flow .flow .step1 {order: 1}
#flow .flow .step2 {order: 2}
#flow .flow .step3 {order: 3}
#flow .flow .step4 {order: 5}
#flow .flow .step5 {order: 6}
#flow .flow .step6 {order: 7}
#flow .flow .arrow1 {order: 4}
#flow .flow .arrow2 {order: 8}

#flow .flow .step3::after,
#flow .flow .step6::after,
#flow .flow .arrow2 {display: none;}


#flow .flow .step::after{
  content: '';
  width: 20px;
  height: 20px;
  border-top: solid 5px var(--color_orange);
  border-right: solid 5px var(--color_orange);
  position: absolute;
  top: 35%;
  right: -40px;
  transform: rotate(45deg);
}
#flow .flow .arrow {
  position: relative;
  width: 100%;
  height: 5px;
  background: var(--color_orange);
  margin: 50px 120px ;
}
#flow .flow .arrow::before,
#flow .flow .arrow::after {
  content: "";
  display: block;
  background: var(--color_orange);
  position: absolute;
  width: 5px;
  height: 30px;
}
#flow .flow .arrow::before{
  top: -30px;
  right: 0;
}
#flow .flow .arrow::after {
  bottom: -30px;
  left: 0;
}
#flow .flow .arrow span {
  display: block;
  width: 20px;
  height: 20px;
  border-top: solid 5px var(--color_orange);
  border-right: solid 5px var(--color_orange);
  position: absolute;
  bottom: -30px;
  left: -8px;
  transform: rotate(135deg);

}


/*鍵の問題は突然に…
---------------------------------------------------------------*/
#trouble .trouble {padding-bottom: 100px;}
#trouble .trouble_bg {
  overflow: hidden;
  text-align: center;
  min-width: 960px;
  margin: 0 auto;
}
#trouble .trouble_bg img{
  display: block;
  width: 1060px !important;
  margin: auto;
}

/***トラブル***/
#trouble .trouble {
  padding-top: 100px;
}
#trouble .trouble h2 {
  font-size: var(--fs_l);
  display: block;
  width: 1060px !important;
  margin: 0 auto 100px;
  padding-left: 180px;
}
#trouble .trouble ul {
  width: 640px;
  margin: auto;
}
#trouble .trouble ul li {
  width: calc((100% - 30px) / 2);
  font-size: var(--fs_s);
  padding: 20px 0 10px;
}
#trouble .trouble ul li:nth-child(n+3) {margin-top: 30px}

#trouble .trouble::before {
  height: 200px;
}
#trouble .trouble::after {
  height: 400px;
  width: 100%;
  min-width: 960px;
}

/***おまかせください***/
#trouble .choose-me {
  padding:60px 0 50px;
}
#trouble .choose-me img.logo {
  width: 120px;
  top: -60px;
  left: calc(50% - 60px);
}
#trouble .choose-me img.staff {
  top:0;
  left: calc(50% - 500px);
}
#trouble .choose-me img.car {
  top:320px;
  left: calc(50% + 90px);
}
#trouble .choose-me img.cha {
  top:135px;
  left: calc(50% + 230px);
}
#trouble .choose-me h3 {font-size: var(--fs_l3);}
#trouble .choose-me .sub {font-size: var(--fs_l);}
#trouble .choose-me p:last-child {width:750px;margin: auto }
#trouble .choose-me .line_title {  font-size: var(--fs_l);}
#trouble .choose-me .line_title span.inner {
  display: block;
  width: 960px;
  margin: 0 auto;
  padding-left: 300px;
}
#trouble .choose-me .line_title .bg1,
#trouble .choose-me .line_title .bg3 {
  background: linear-gradient(to right, #ffe240 50%,rgba(0,0,0,0) 50%);
}
#trouble .choose-me .line_title .bg2,
#trouble .choose-me .line_title .bg4 {
  background: linear-gradient(to right, #e5ab39 50%,rgba(0,0,0,0) 50%);
}

#trouble .choose-me .line_title .bg1 .inner::before,
#trouble .choose-me .line_title .bg3 .inner::before,
#trouble .choose-me .line_title .bg2 .inner::before,
#trouble .choose-me .line_title .bg4 .inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
#trouble .choose-me .line_title .bg1 .inner::before,
#trouble .choose-me .line_title .bg3 .inner::before {
  background: #ffe240;
}
#trouble .choose-me .line_title .bg2 .inner::before,
#trouble .choose-me .line_title .bg4 .inner::before {
  background: #e5ab39;
}
#trouble .choose-me .line_title .bg1 .inner::before { right:290px }
#trouble .choose-me .line_title .bg2 .inner::before { right:280px }
#trouble .choose-me .line_title .bg3 .inner::before { right:340px }
#trouble .choose-me .line_title .bg4 .inner::before { right:330px }

#trouble .choose-me .line_title .bg1 .inner::after ,
#trouble .choose-me .line_title .bg2 .inner::after ,
#trouble .choose-me .line_title .bg3 .inner::after ,
#trouble .choose-me .line_title .bg4 .inner::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  height: 100%;
  border: solid;
  border-width: 30px 15px;
}
#trouble .choose-me .line_title .bg1 .inner::after {
  right: 260px;
  border-color: #ffe240 transparent transparent #ffe240;
}
#trouble .choose-me .line_title .bg2 .inner::after {
  right: 250px;
  border-color: #e5ab39 transparent transparent #e5ab39;
}
#trouble .choose-me .line_title .bg3 .inner::after {
  right: 310px;
  border-color: #ffe240 transparent transparent #ffe240;
}
#trouble .choose-me .line_title .bg4 .inner::after {
  right: 300px;
  border-color: #e5ab39 transparent transparent #e5ab39;
}
#trouble .choose-me .inner:last-child {
  width: 1060px;
  padding: 0 50px;
}
#trouble .choose-me ul.benefit {
  width: 580px;
  margin:70px 0 20px 0px;
}
#trouble .choose-me ul.benefit li {
  width: calc((100% - 20px) / 3);
  font-size: var(--fs_m);
  padding: 55px 0 10px;
}
#trouble .choose-me ul.benefit li .circle_title {
  width: 100px;
  height: 100px;
  top: -50px;
  left: calc(50% - 50px);
}
#trouble .choose-me ul.benefit li .circle_title i {font-size: 30px}
#trouble .choose-me ul.benefit li .circle_title span {font-size: 35px}
#trouble .choose-me .inner:last-child p {font-size: var(--fs_s);}

#trouble .choose-me::before {
  height: 200px;
}
#trouble .choose-me::after {
  height: 400px;
  width: 100%;
  min-width: 960px;
}




/*お客様の声
---------------------------------------------------------------*/
#voice .voice {
  display: flex;
  justify-content: space-between;
}
#voice .voice .voice_con {
  width: calc((100% - 30px) / 3);
}
#voice .voice .voice_con figure {
  text-align: center;
}
#voice .voice .voice_con .title_sp ,
#voice .voice .voice_con .title_pc {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}
#voice .voice .voice_con h3 {
  font-size: var(--fs_s);
  margin: 10px 0;
}




/*よくある質問
---------------------------------------------------------------*/
#faq .faq_title {
  border-top: solid 4px;
  border-bottom: solid 4px;
}
#faq .faq_title .sub {
  font-size: var(--fs_s);
  width: 200px;
  left: calc(50% - 100px);
}
#faq .faq_title_sub {font-size: var(--fs_s);}
#faq .faq_title_sub img.cha {
  left: 20px;
  bottom: 10px;
}

#faq .faq {
  font-size: var(--fs_s2);
  width: 750px;
  margin:1em auto 0;
}
#faq .faq .faq_q {
  padding:0.75em  1em;
}
#faq .faq .faq_a {}



/*鍵猿の鍵交換はなぜ安心?
---------------------------------------------------------------*/
#why .intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs_m);
  width: 850px;
  margin: auto;
}
#why .intro figure {
  width: 345px;
}
#why .intro p {
  width: 490px;
}
#why .benefit {
  width: 750px;
  margin: 40px auto 0;
  padding: 20px 50px 20px;
  border-radius: 20px;
}
#why .benefit h3 {margin-bottom: 50px}
#why .benefit h3 .title_1 {font-size: var(--fs_m);}
#why .benefit h3 .title_2 {font-size: var(--fs_l2);}
#why .benefit p {font-size: var(--fs_s);}



/*YouTube　レスポンシブ対応
-----------------------------*/
#youtube {
  width: 960px;
  padding: 2em 0;
}
#youtube .size {
  width: 750px;
  margin: auto;
}